アニメーションjavascript on words

-3

私はJavascriptで新しいコーディングをしていますが、私はどのようにjsを使ってこの例を行うことができますか？単語のアレイと、各ワードアニメーションjavascript on words

例と強調表示の速度を選択して：animation words javascript

出典

2016-12-28 CristJian Cordero Loor

あなたがこれまでに書かれているいくつかのコードを共有することはできますか？ –

こんにちは、私は言ったように、私はちょうどjsを学んでいます、私はちょうど基礎を知っている、誰が私を助けることができますか私はこの –

キャンバスを使用して私を導くことができますか？それを達成するためのアニメーションライブラリがたくさんあります... – areiilla

これを実現する方法はたくさんあります。私はちょうどあなたに醜い方法を示しますこれはsetIntervalメソッドで純粋なJavaScriptを使用しています。

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を開始へようこそ。

私はこのようなチュートリアルを開始します：それはコードでHTML要素を変更する方法を説明します http://www.w3schools.com/jquery/

。

JavaScriptのCSSプロパティを快適に設定した後で、setTimout()またはsetIntervalを見ると、設定したタイムスケジュールで視覚的な変化をアニメーションして確認することができます。

出典

2016-12-28 23:13:31

アニメーションjavascript on words

答えて

関連する問題