Question

继2011年的题为动态字交换动画的上一个问题之后。

感谢Marek的回答，我已经能够在页面上创建一个动画，每隔几秒就会用一个列表中的另一个单词改变一个单词。然而，之前的问题/例子是：“我有一个标题说，”这很酷，“但我希望”酷“每隔几秒被”整洁/令人敬畏/ groovy /等“替换。

我需要我的标题说，例如，（为了连续性）“这是一个很酷的人”。我遇到的问题是，因为替代词更长，所以当句子旋转通过每个单词时，句子的长度会有所不同。是否有一种方法可以指定，使用Pure JS，“man”与“is”保持一定的距离，因此替代词填补了它们之间的差距，整个句子的长度保持不变？

而且，如果以上是可能的，那么替代词可以在“man”和“is”之间居中吗？

任何帮助非常感谢！菲尔

我目前拥有的Pure JS（从前面提到的帖子中读取）：

<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>

Answer 1

每次只使用字符串的第8个索引，并在新单词后追加man。

这是你的意思吗？

Answer 2

这是更多html / css的事情......然而，在几个mods之后：

http://jsfiddle.net/X3wZV/1/

var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "<span id='first'>This is</span> <span id='inner'>cool</span> <span id='sec'>man</span>";
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").html(txt);
}
setInterval("_changeText()", 1000);

和一点造型（检查CSS，根据您的需要更改）...我认为这很接近您想要的，如果我正确理解您的问题...：）< / p>

动态单词交换动画3

2 个答案: