1

我正在尝试为页面上的文本创建动画，每隔几秒钟，将一个单词与列表中的另一个单词进行更改。示例：我有一个标题，上面写着“这很酷”，但我希望每隔几秒钟将“酷”替换为“整洁/真棒/groovy/etc”。

老实说，我不确定解决这个问题的最佳方法（就使用什么技术而言），而且我找不到适用于现代浏览器的代码简介。非常感谢您的帮助！

4

3 回答 3

3

在纯 JS

http://jsfiddle.net/M5gxH/3/

<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>
于 2011-08-29T20:12:27.397 回答
2

在jQuery中，我会做这样的事情：

http://jsfiddle.net/6SRaB/1/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
    changer();
});

function changer() {
    var words = ["nifty","groovy","far out"]; // add as many as you like
    var idx = Math.floor(words.length * Math.random());  // randomizer
    $('#change').text(words[idx]); // replaces the contents of "change"
    var time = Math.floor(5000 * Math.random() + 3000);  // in milliseconds
    setTimeout(changer,time);  // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>

关键是使用带有 ID 的 SPAN 标签，您可以快速挑选出来。

于 2011-08-29T20:04:33.540 回答
0

这个问题已经很老了，但它出现在我的谷歌搜索中。在 2018 年，您可以使用 CSS 动画轻松实现此行为，而无需任何额外的 JavaScript 代码。

以下内容应为您提供所需的内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated{
        display: inline;
        text-indent: 8px;
      }

      .animated span{
        animation: topToBottom 12.5s linear infinite 0s;
        -ms-animation: topToBottom 12.5s linear infinite 0s;
        -webkit-animation: topToBottom 12.5s linear infinite 0s;
        color: red;
        opacity: 0;
        overflow: hidden;
        position: absolute;
      }

      .animated span:nth-child(2){
        animation-delay: 2.5s;
        -ms-animation-delay: 2.5s;
        -webkit-animation-delay: 2.5s;
      }

      .animated span:nth-child(3){
        animation-delay: 5s;
        -ms-animation-delay: 5s;
        -webkit-animation-delay: 5s;
      }

      .animated span:nth-child(4){
        animation-delay: 7.5s;
        -ms-animation-delay: 7.5s;
        -webkit-animation-delay: 7.5s;
      }

      .animated span:nth-child(5){
        animation-delay: 10s;
        -ms-animation-delay: 10s;
        -webkit-animation-delay: 10s;
      }

      @-moz-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -moz-transform: translateY(-50px); }
        10% { opacity: 1; -moz-transform: translateY(0px); }
        25% { opacity: 1; -moz-transform: translateY(0px); }
        30% { opacity: 0; -moz-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
      @-webkit-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -webkit-transform: translateY(-50px); }
        10% { opacity: 1; -webkit-transform: translateY(0px); }
        25% { opacity: 1; -webkit-transform: translateY(0px); }
        30% { opacity: 0; -webkit-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
      @-ms-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -ms-transform: translateY(-50px); }
        10% { opacity: 1; -ms-transform: translateY(0px); }
        25% { opacity: 1; -ms-transform: translateY(0px); }
        30% { opacity: 0; -ms-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
    </style>
  </head>

  <body>
    <h2>CSS Animations are
      <div class="animated">
        <span>cool.</span>
        <span>neat.</span>
        <span>awesome.</span>
        <span>groovy.</span>
        <span>magic.</span>
      </div>
    </h2>
  </body>
</html>

请注意，这只是垂直滑动的示例。在动画/过渡方面，CSS 基本上有无限的可能性。

于 2018-05-02T23:09:06.677 回答