動態詞彙交換動畫3

繼2011年題爲「動態詞彙交換動畫」的前一個問題。動態詞彙交換動畫3

感謝Marek的回答，我已經能夠在頁面上創建一個動畫文本，每隔幾秒鐘，用一個列表中的另一個詞改變一個詞。然而，前面的問題/例子是：「我有一個標題，上面寫着」這很酷「，但我想要」酷「，每隔幾秒鐘由」整潔/真棒/ groovy /等「替換。需要我的頭文件來說，例如（爲了連續性）「這是一個很酷的人」。我遇到的問題是，因爲替換單詞的時間越長，它使得句子在旋轉通過每個單詞時的長度變化。有一種方法可以使用Pure JS來指定「man」與「is」保持一定的距離，因此替換詞填補了空白，並且整個句子保持相同的長度？

而且，如果上述是可能的，可以在「人」和「是」之間居中置換字嗎？

任何幫助非常感謝！菲爾

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

來源

2014-02-18 user3324665

只是一個說明 - 這不是'純'，香草JS - jQuery也在這裏... – sinisake

這是更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，根據您的需要改變它）。 ..i認爲這是接近你想要的東西，如果我正確地理解你的問題... :)

來源

2014-02-18 18:34:35 sinisake

，只用字符串每次第八指數和新單詞後追加的人。

這是你的意思嗎？

來源

2014-02-18 18:25:43 codebender

動態詞彙交換動畫3

回答

相關問題