アニメーション関数は、任意の要素は、指定された宛先に移動されます

まず、アニメーションバッファ機能

/ ** 
 *アニメーション関数
 *任意の要素指定されたターゲット位置に
 * @param {*}の任意の1つの素子要素の
 * @param {*}目標目標位置（数値型）
 * / 
関数アニメーション（要素、ターゲット）{ 
    /きれいにする/タイマー
    てclearInterval（element.timeIdを）; 
    element.timeId =のsetInterval（関数（）{ 
        //モバイル要素の現在位置を取得
        VARを私の現在の= $（ "DV"）offsetLeft ;. 
        //各移動
        VaRのステップ9 =; 
        STEPターゲット=>現在のステップ： -工程;? 
        移動後//距離
        電流= + STEP; 
        //目標位置に到達したか否かを判断する
        場合（Math.abs（ターゲット-現在） > Math.abs（ステップ）） { 
            私の$（ "DV"）=現在style.left + "PX" ;. 
        }他{
            clearInterval（element.timeId）。
            私の$（ "DV"）style.left =ターゲット+ "PX"。
        } 
    }、20）; 
}

二、HTMLコード

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 

<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
        のdiv { 
            幅：100pxに。
            高さ：100pxに。
            位置：絶対; 
            トップ：は50px; 
            左：は50px; 
            国境：1pxのソリッドピンク。
        } 
    </スタイル> 
</ HEAD> 

<BODY> 

    の<input type = "ボタン"
    <DIV ID = "DV"> </ div> 

    <スクリプトSRC = "./ JS / common.js"> </ SCRIPT> 
</ BODY> 
</ HTML>

第三に、サードパーティ製のjsファイル--- common.js

取得// IDはオブジェクトの要素
マイ$（ID）の関数は、{ 
    のdocument.getElementById（ID）を返す; 
} 

/ ** 
 *アニメーション関数
 *指定されたターゲット位置に任意の要素
 * @param {*}の要素の任意の要素
 * @param {*}目標目標位置（数値型）
 * / 
関数アニメーション（要素、ターゲット）{ 
    //タイマーがきれいに
    てclearInterval（element.timeId）を、
    element.timeIdはのsetInterval（関数（=）{ 
        //可動要素を取得現在の位置
        。VAR私の現在の= $（ "DV"）offsetLeft; 
        //各移動
        するvar STEP = 9;。
        STEP目標=>現在のSTEP：-step ;? 
        運動//後の距離
        現在= + STEP; 
        //目標位置に到達したかどうかを決定します
        もし（Math.abs（ターゲット-現在）> Math.abs（ステップ））{ 
            。私の$（ "DV"）style.left =現在の+ "PX"。
        }他{ 
            てclearInterval（element.timeId）。
            私の$（ "DV"）style.left =ターゲット+ "PX"。
        } 
    }、20）; 
}

第四に、レンダリング

　　スクリーンショットの初期位置

　　初期位置----> 400ピクセルで、

　　400ピクセルの場所-----> 800ピクセルオフィス

　　800ピクセルの場所-----> 400ピクセルオフィス

第五に、ソースコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>

    <input type="button" value="移动到400px" id="btn" />
    <input type="button" value="移动到800px" id="btn2" />
    <div id="dv"></div>

    <!-- 引入第三方js文件 -->
    <script src="./js/common.js"></script>
    <script>
        my$("btn").onclick = function(){
            animate(my$("dv"),400);
        }

        my$("btn2").onclick = function(){
            animate(my$("dv"),800);
        }
    </script>
</body>
</html>

アニメーション関数は、任意の要素は、指定された宛先に移動されます

おすすめ