[アート] DOMは、リアルタイムアニメーションをプログラミング---スライド

画像が表示されている場合onmouseoverイベントがトリガされます。私達はちょうどonmouseover属性変更onclikcから各リンクのイベントハンドラに置く----ギャラリースクリプトの場合に従います。それは働くことができますが、画像がスムーズに十分に表示されます：あなたが最初にマウスポインタがリンクの上に置い入れると、新しい画像が過去にロードされます。

それは、高速ネットワーク接続上にある場合でも、この数も少し時間がかかりますし、我々はすぐに対応できるように願っています。

問題を解決するには：あなたは、各リンクのために用意されている場合は、プレビュー画像をこれらの写真を表示するには、ハンドオーバにおけるいくつかの遅延が常にあります。また、単にこれらの画像の表示は、私たちの目的の効果ではありません切り替えます。私たちは、より速く、より良いものを望んでいました。

　　　　　ここでは、我々は何をすべきかです。

　　　　　すべてのプレビュー画像のために■が絵の形で「集合写真」として生成されます。

　　　　　 ■この大多数のための「集合写真」画像非表示にします。

　　　　　ユーザーがリンクを、この「グループ写真」絵の唯一の対応する部分の上にマウスポインタを置いたとき■。

<！DOCTYPE用HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< HTML のxmlns = "のhttp：/ /www.w3.org/1999/xhtml」> 
< 頭> 
< メタHTTP-当量= "Content-Typeの" コンテンツ= "text / htmlの;のcharset = UTF-8"  /> 
< タイトル> Webデザイン</ タイトル> 
< スタイルタイプ= "テキスト/ cssの" > 
#slideshow { 幅：100pxに。位置：相対; オーバーフロー：隠されました; } 
</ スタイル> 
</ ヘッド> 

< 身体> 
< H1 > Webデザイン</ H1 > 
< P >これらはあなたが知っておくべきものです。</ P > 
< OL ID = 'LINKLIST' > 
    < 李> < HREF = "structure.html" >構造</ A > <
    李> < のhref = "presentation.html" >プレゼンテーション</ A > </ 李> < 李> < のhref = "behavior.html" >行動</ A > </ 李> </ OL > < div要素のid = 'スライドショー' > < IMG SRC = "画像/ topics.gif"   ALT = '建物のウェブデザインのブロック' ID = 'プレビュー' /> </ DIV >< スクリプト>
    


    


window.onload = prepareSlideshow。
機能prepareSlideshow（）{
     / * 为图片应用样式* / 
    VARのプレビュー= のdocument.getElementById（' プレビュー' ）。
    preview.style.position =  「絶対」。
    preview.style.left =  ' 0PX ' ; 
    preview.style.top =  ' 0PX ' ;
    VARのリスト= のdocument.getElementById（' LINKLIST ' ）;
    VARアイテム= list.getElementsByTagName（' A ' ）; 
    項目[ 0 ] .onmouseover =  関数（）{ 
          moveElement（' プレビュー' 、- 100 、0 、10 ）; 
    } 
    項目[ 1 ] .onmouseover =  関数（）{ 
          moveElement（' プレビュー' 、- 200 、0 、10 ）; 
    } 
    アイテム[ 2] .onmouseover =  関数（）{ 
          moveElement（' プレビュー' 、- 300 、0 、10 ）; 
    } 
} 
関数moveElement（ELEMENTID、final_x、final_y、間隔）{
     場合（！のdocument.getElementById）を返す 偽。
    もし（！のdocument.getElementById（ELEMENTID））を返す 偽。
    VaRのELEM = のdocument.getElementById（ELEMENTID）。
    もし（elem.movement）{
        clearTimeout（elem.movement）。
    }
     final_y）{ VAR XPOS = のparseInt（elem.style.left）。
    VAR YPOS = のparseInt（elem.style.top）。
    もし（XPOS == final_x && YPOS == final_y）{
         戻り 真。
    } 
    であれば（XPOS < final_x）{ 
        XPOS ++ 。
    } 
    であれば（XPOS > final_x）{ 
        XPOS - 。
    } 
    であれば（YPOS < 
        YPOS ++ ; 
    } 
    もし（YPOS > final_y）{ 
        YPOS - 。
    } 
    elem.style.left = XPOS + ' ピクセル' ; 
    elem.style.top = YPOS + ' ピクセル' 。
    VaRの繰り返し= " moveElement（ ' " + ELEMENTID + " '、" + final_x + " 、" + final_y + " 、" + 間隔+ "）" ;
     elem.movement = のsetTimeout（リピート、10 ）; 
} 

</ スクリプト> 
</ ボディ> 
</ HTML >

グリーン場合は、コードが存在しない、物事は少し頭に思える：マウスポインタがリンク間を前後に素早く移動する場合は、アニメーション効果がそれらを混乱になります。

分析：アニメーションの問題が原因グローバル変数に正しくないことが原因です。

　　　これは、左の隠された危険ユーザがリンクの上にマウスポインタを置いたときに、関係なく、最後の呼び出しは、画像を移動する場所に置かれているかどうかの、moveElement関数が呼び出されると、再び別の場所に画像を移動するために試みられますが：。ユーザーは、リンク間をすばやくマウスを移動したとき、その後、運動変数は次のようになります

　　　　　　　　　　　　戦争ロープの綱引きなどの変更前後に、そしてmoveElement機能は、2つの異なる場所に同時に画像を移動しようとします。

　　　ユーザーが十分に速く、マウスを移動した場合、ヒステリシスをアニメーション化するためにつながるイベントのキューに蓄積されたsetTimeout。アニメーション遅れ現象を除去するためにてclearTimeoutとイベントキューのsetTimeoutに蓄積除去することができます。

　　　clearTimeout（移動）。

　　　運動変数が設定されていない前に、この文が実行された場合は、我々はミスを得ることができます。

　　　私は、ローカル変数を使用することはできません：VARの動きは=のsetTimeout（繰り返し、間隔）。

　　　あなたがこれを行う場合は年間の文脈におけるローカル変数の移動てclearTimeout機能がないため、てclearTimeout関数呼び出し文では動作しません。

　　つまり、両方がグローバル変数を使用することはできません、ローカル変数を使用することはできません。私たちは、その要素が変数を移動し、関連しているだけ必要で、それらの間に何かの範囲を必要としています。

　　　だけで特定の要素に関連する変数が存在します。実際には、我々はそれらを使用していました。それは、「プロパティ」です。

　　　これまでのところ、我々はそうでなelement.firstChild、elemen.styleとして、DOMが提供するプロパティを使用してきました。Javascriptが私たちは要素の属性を作成することができます：element.property =値;

　　　例：element.foo =「バー」;それは多くの変数を作成するようなものですが、この違いは、特定の変数の要素に固有のものです。

　　　我々は、要素（ELEM要素）が移動されているプロパティとしてグローバル変数から変数の動きを変更します。

正味の効果：の動きをという名前のプロパティを受ける要素を、移動しているのだから、どんなにmoveElement機能。機能実行moveElement運動の先頭に要素がプロパティを持っている場合、それはてclearTimeout機能をリセットする必要があります。

結果として、偶数番目の要素は、異なる方向に移動させる必要があり、setTimeout関数呼び出し文の唯一の実用的な実装ように迅速にマウスポインタを移動させるユーザとして。

ます。https：//www.cnblogs.com/positive/p/3680997.htmlで再現

[アート] DOMは、リアルタイムアニメーションをプログラミング---スライド

おすすめ