JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の左側からの距離を格納する変数を宣言し、次に要素が毎回移動する必要がある距離を格納する変数を宣言し、最後にこのメソッドに完了時間を指定することです。取得した値が数値データでない場合は変換する必要があり、変換しないと判定できないことに注意してください。次に、要素が特定の位置に移動した後、負のステップ値を与えると要素が元の位置に戻ることを決定します。

要素が左側または右側に移動したときに回転効果を実現する方法についても考えることができます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="UTF-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   *{マージン: 0;パディング: 0;}
   本文{位置: 相対;}
   ＃箱{
    幅: 120px;高さ: 120px;背景: 緑;
    位置: 絶対;上: 100px;
    /* ここで背景画像を移動対象として導入することができます。 */
    /* 背景: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </スタイル>
 </head>
 <本文>
  <button type="button" id="Button">クリックして移動します</button>
  <div id="box" style="left: 0px;"></div>
  
  <script type="text/javascript">
   var ボタン = document.getElementById("ボタン");
   var box = document.getElementById("box");
   // 1 回に移動するピクセル数。step はステップの長さを表します。var step = 5;
   Button.onclick = 関数(){
    
    var タイマー = setInterval(関数(){
     
     //ボックスの左側の値を取得し、整数に変換します。計算を実行する前に数値に変換する必要があります。
     // parseInt は取得した文字列を文字型に変換することを意味します var o_left = parseInt(box.style.left);
     //要素をより速く移動させたい場合は、各移動の距離を増やすか、完了時間を短縮することができます。 //ただし、完了時間を短縮する方が効果的です。 var n_left = o_left+step; //毎回 10px 右に移動します
     box.style.left = n_left+"px";
     if ( n_left>500) { //移動距離が400pxより大きい場合は後退します step = -5;
     }そうでない場合(n_left==0){
      ステップ = 5;
     }; 
    },100);
   };
   
  </スクリプト>
 </本文>
</html>

結果は次のとおりです。