Question

最好使用Jquery（css或html很好），如何替换持续时间显示的文本？一个例子就像Groundswell PR页面。

Answer 1

我使用jQuery animate()和setTimeout函数为您****HERE****创建了一个工作示例。如果您想在循环中添加更多文字，只需添加一个新的div textDiv类和p标记。您还需要将jQuery代码中的maxCount变量更改为循环中的文本数。

<强> HTML ：

<div class="container">
  <div class="textDiv"><p class="text1"> This is text 1</p></div>
  <div class="textDiv"><p class="text2"> Another text to show how it works</p></div>
</div>

<强> CSS ：

* {box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 20px auto;
  background: #d9f9fc;
  text-align: center;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,1);
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}
.text2 {
  opacity:0;
}

<强>的jQuery ：

$(document).ready(function() {
   var count = 1;
   var maxCount = 2;
   textAnimate(count,maxCount);
});

function textAnimate(count,maxCount) {
    $(".text"+count).animate({
       opacity: '0'
    }, { duration: 300, queue: false });

    count++;
    if (count > maxCount) {count = 1;}

    $(".text"+count).animate({
       opacity: '1'
    }, { duration: 300, queue: false });

    window.setTimeout(function() { textAnimate(count,maxCount) }, 1000);
}

如何在特定时间内主动替换页面上显示的文本？

1 个答案: