スライド効果を実現するためのネイティブJavaScript

<本文>
 <h1>簡単なアニメーション制作</h1>
 <p>リンクジャンプ先表示</p>
 <ol id="リスト">
 <li>
 <a href="list1.html" >まず</a>
 </li>
 <li>
 <a href="list2.html" >2番目</a>
 </li>
 <li>
 <a href="list3.html" >3番目</a>
 </li>
 </ol>
 <!-- 動的に追加された画像表示領域>-->
<script src="script.js"></script>
</本文>

オル{
 左パディング: 20px;
}
オルリ{
 表示: インライン;
 右マージン: 10px;
}
＃ビュー{
 幅: 600ピクセル;
 高さ: 200px;
 位置: 絶対;
}
#スライドショー{
 幅: 200ピクセル;
 高さ: 200px;
 オーバーフロー: 非表示;
 位置: 相対的;
}

/*共有負荷*/
関数addLoadEvent(fun){
 var oldLoad = window.onload;
 if(typeof oldLoad != "function"){
  ウィンドウのonload = 楽しい;
 }それ以外{
  window.onload = 関数(){
   古いロード();
   楽しい（）;
  }
 }
}

/*挿入後*/
関数 insertAfter(newNode,oldNode){
 var 親 = oldNode.parentNode;
 if(parent.lastChild == oldNode){
  親ノードに新しい子ノードを追加します。
 }それ以外{
  親ノードの前に新しいノードを挿入し、古いノードに次の兄弟を追加します。
 }
}

関数 show(){
 /* 下位互換性 */
 if(!document.getElementById) は false を返します。
 if(!document.getElementsByTagName) が false を返します。
 if(!document.createElement) は false を返します。

 /*リストのリストを取得する*/
 var リスト = document.getElementById("リスト");

 /*画像表示領域を作成する*/
 /*外側のdiv*/
 var div = document.createElement("div");
 div.setAttribute("id","スライドショー");
 /*画像*/
 var img = document.createElement("img");
 img.setAttribute("id","view");
 img.setAttribute("src","image.jpg");
 img.setAttribute("alt","画像プレビュー");
 /*div がリストの直後に来るように insertAfter() 関数を追加します*/
 div にリストを挿入します。
 div.appendChild(画像);

 /*イベントをバインド*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover = 関数(){
  要素を移動します("view",0,0,10);
 };
 a[1].onmouseover = 関数(){
  要素を移動します("view",-200,0,10);
 };
 a[2].onmouseover = 関数(){
  要素を移動します("view",-400,0,10);
 };
}


/*移動の意味* パラメータ: 画像が配置されている要素の ID、画像を移動する左のオフセット、上部のオフセット、時間*/
関数moveElement(要素ID,左,上,間隔){
 /* 下位互換性 */
 if(!document.getElementById) は false を返します。
 if(!document.getElementById(elementID)) は false を返します。

 /*画像を取得する*/
 var img = document.getElementById(要素ID);

 /*現在の要素がすでにアニメーション関数内にあるかどうかを判定する*アニメーションの蓄積を防ぐ*/
 if(img.moveNow){
  /* アニメーションスタックをクリアします */
  タイムアウトをクリアします(img.moveNow);
 }

 /*要素の左と上が設定されているかどうかを判定します*/
 if(!img.style.left){
  スタイル:
 }
 if(!img.style.top){
  スタイルトップ = "0px";
 }


 /*画像の現在の位置を取得します* この時点で取得される値は文字列形式なので、parseInt() を使用して強制的に文字列に変換します*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*現在の位置と目標位置を比較する*/
 if(oldLeft == 左 && oldTop == 上){
  true を返します。
 }

 /*ユーザーエクスペリエンスを確保するため、移動距離が大きい場合は移動を速くする必要があります*移動距離が小さい場合は遅くすることができます*距離の差に基づいて移動距離を判断し、毎回距離の差の1/10ずつ移動します
 */
 /*dist変数は、現在のオフセットとターゲットオフセット間の距離を格納するために使用されます*/
 var 分散 = 0;
 if(oldLeft < left){
  /*ceil() は小数点以下を切り上げて 1 未満の数値を防ぎます*/
  dist = Math.ceil((left-oldLeft)/10);
  古い左 = 古い左 + 距離;
 }
 （古い左＞左）の場合{
  dist = Math.ceil((oldLeft-left)/10);
  oldLeft = oldLeft - dist;
 }
 if(oldTop < top){
  dist = Math.ceil((top-oldTop)/10);
  古いTop = 古いTop + 距離;
 }
 if(oldTop > top){
  dist = Math.ceil((oldTop-top)/10);
  oldTop = oldTop - dist;
 }

 /*動く*/
 img.style.left = oldLeft+"px";
 img.style.top = oldTop+"px";

 /*関数を呼び出す*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*この要素の属性としてアニメーションを実行する関数を設定します*/
 img.moveNow = setTimeout(結果、間隔);
}

LoadEvent を追加します(表示);