Question

我想在我的网站上每分钟添加一些自动更改的文字。我对我的代码很满意，但我想要更流畅的动画，因此内容会出现并且消失得更慢。有什么想法吗？

＆＃13;

polarity

＆＃13;

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
function ChangeText(){
  document.getElementById('Citation').innerHTML = cit[ind];
  document.getElementById('author').innerHTML = author[ind];          
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
  setTimeout("ChangeText();", 400);
}
ChangeText();

＆＃13;

Answer 1

我们可以利用一些css过渡并扩展你的javascript和html来获得所需的功能。代码如下文字说明。

使用css，我们可以告诉浏览器在目标持续时间内使用不同的动画技术（ease-in，ease-out等）更改某些属性。以下默认为ease转换，超过1秒，针对符合css选择器/规则的给定元素的任何opacity更改（有关详情，请参阅w3 schools transitions）。

transition: opacity 1s;

现在设置html / javascript以使用转换。我们想制作一些html元素，这些元素将与下一个引用/作者来回切换。当我们增加目标引文/作者时，这些将基本上淡入/淡出。我们需要使用一些绝对定位以使元素重叠，我们需要一些包含div的帮助来完成工作（请参阅下面的HTML和css，注意我做的事情） 1秒过渡。）

在定义我们的HTML之后，我们必须更新javascript以设置下一个和原始策展人/作者的innerHTML（请参阅下面更新的ChangeCitation1()和ChangeCitation2()方法，请注意2秒延迟到切换文本，对于你来说，这可能会在生产中设置为60秒）。

基本上我们有一个切换功能，用于设置套牌上的策展人/作者和策展人/作者，并无限地翻转不透明度。衰落1秒，每2秒更改一次文本。

＆＃13;

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
document.getElementById('Citation1').innerHTML = cit[ind];
document.getElementById('Author1').innerHTML = author[ind]; 
ChangeCitation2();
function ChangeCitation2(){
  incrementIndex()
  document.getElementById('Citation2').innerHTML = cit[ind];
  document.getElementById('Author2').innerHTML = author[ind]; 
  document.getElementById('Citation1').style.opacity = 0;
  document.getElementById('Author1').style.opacity = 0;
  document.getElementById('Citation2').style.opacity = 1;
  document.getElementById('Author2').style.opacity = 1;
  setTimeout(ChangeCitation1, 2000);
}
function ChangeCitation1(){
  incrementIndex();
  document.getElementById('Citation1').innerHTML = cit[ind];
  document.getElementById('Author1').innerHTML = author[ind];
  document.getElementById('Citation1').style.opacity = 1;
  document.getElementById('Author1').style.opacity = 1;
  document.getElementById('Citation2').style.opacity = 0;
  document.getElementById('Author2').style.opacity = 0;
  setTimeout(ChangeCitation2, 2000);
}
function incrementIndex(){
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
}

＆＃13;

#Citation1, #Author1{
    transition: opacity 1s;
}
#Citation2, #Author2{
    transition: opacity 1s;
    position:absolute;
    top:0px;
    margin-top:0px
}
#citationContainer, #authorContainer{
    position:relative;
}

＆＃13;

<div id="citationContainer">
    <p id = "Citation1"></p>
    <p id = "Citation2"></p>
</div>
<div id="authorContainer">
    <p id = "Author1"></p>
    <p id = "Author2"></p>
</div>

＆＃13;

您可以扩展以下内容以使用伪元素::before或::after，并在css中操纵它content ...但这是一个很好的开始你可以去挖掘！

平滑更改文本

1 个答案: