動畫javascript on words

-3

我是Javascript中的新編碼，我想知道如何使用js來做這個例子;與字的陣列，並且選擇每一字之間突出動畫javascript on words

例的速度：animation words javascript

來源

2016-12-28 CristJian Cordero Loor

你能分享你至今寫了一些代碼嗎？ –

嗨，正如我所說的，我只是在學習js，我只知道基礎知識，這就是爲什麼我想知道是否有人可以幫助我通過使用canvas的 –

引導我？有很多動畫庫實現... – areiilla

有很多方法可以實現這一點。我只會告訴你最糟糕的方式這是使用純JavaScript與setInterval方法。

var arrOfWord=["cat","dog","fun","sat","wen","ten","sun","net","hat"]; 
 
var arrOfDiv=[]; 
 
var con=document.getElementById("container"); 
 
for(var i in arrOfWord){ 
 
    con.innerHTML+="<div id='word-box'>"+arrOfWord[i]+"</str>"; 
 
} 
 
arrOfDiv=con.children; 
 
window.setInterval(
 
(function(){ 
 
    var next=0; 
 
function highlightWord(){ 
 
    
 
    if (next>arrOfDiv.length-1){ 
 
    next=0; 
 
    } 
 
    if (next==0){ 
 
    arrOfDiv[arrOfDiv.length-1].style="border: 2px solid #00000000"; 
 
    } 
 
    else arrOfDiv[next-1].style="border: 2px solid #00000000"; 
 
    arrOfDiv[next].style="border: 2px solid #ffff00"; 
 
    next+=1; 
 
} 
 
    return highlightWord; 
 
})(),500 
 
);

#word-box{ 
 
    display: inline-block; 
 
    padding:5px; 
 
    margin:2px; 
 
    border-radius:5px; 
 
    border: 2px solid #00000000; 
 
} 
 

 
#container{ 
 
    width:140px; 
 
}

<div id="container"> 
 
    
 
</div>

來源

2016-12-29 00:00:03 areiilla

謝謝，這有助於很多，現在我可以理解如何做到這一點，因爲我想在畫布上做出這一點，但這將是和圖像正確嗎？ –

-1

歡迎開始的Javascript。

我會喜歡這個教程開始： http://www.w3schools.com/jquery/

它會指導您如何更改與代碼的HTML元素。

在您使用javascript設置CSS屬性後，您可以通過setTimout()或setInterval來設置動畫效果，並在設置的時間表上循環顯示視覺更改。

來源

2016-12-28 23:13:31

動畫javascript on words

回答

相關問題