Animation function, an arbitrary element is moved to a specified destination

First, the animation buffer function

/ ** 
 * animation function 
 * arbitrary element to the specified target position 
 * @param {*} of any one element element 
 * @param {*} target target position (number type) 
 * / 
function Animate (element, target) { 
    / / timer to clean 
    the clearInterval (element.timeId); 
    element.timeId = the setInterval (function () { 
        // Get the current position of the mobile element 
        var My current = $ ( "DV") the offsetLeft;. 
        // each movement 
        var step . 9 =; 
        STEP target => Current STEP: -step;? 
        // distance after movement 
        Current = + STEP; 
        // determines whether the target position is reached 
        if (Math.abs (target - current) > Math.abs (step)) { 
            My $ ( "DV") = Current style.left + "PX."; 
        } the else {
            clearInterval(element.timeId);
            my$("dv").style.left = target + "px";
        }
    }, 20);
}

Two, html codes

<!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 = "move to 400px" ID = "BTN" /> 
    <INPUT type = "Button" value = "move to 800px" id = "btn2" /
    <div id="dv"></div>

    <script src="./js/common.js"></script>
</body>
</html>

Third, the third-party js file --- common.js

The elements of the object acquired // id 
function My $ (ID) { 
    return document.getElementById (ID); 
} 

/ ** 
 * animation function 
 * arbitrary element to the specified target position 
 * @param {*} element arbitrary element 
 * @param {*} target target position (number type) 
 * / 
function Animate (element, target) { 
    // timer to clean 
    the clearInterval (element.timeId); 
    element.timeId = the setInterval (function () { 
        // Get the mobile element current position 
        . var My current = $ ( "DV") the offsetLeft; 
        // each movement 
        var STEP =. 9; 
        STEP target => current STEP: -step;? 
        distance after movement // 
        current = + STEP; 
        // determine whether the target position is reached
        if(Math.abs(target - current) > Math.abs(step)){
            my$("dv").style.left = current + "px";
        }else{
            clearInterval(element.timeId);
            my$("dv").style.left = target + "px";
        }
    }, 20);
}

Fourth, renderings

　　Screenshot initial position

　　The initial position ----> 400px at

　　400px place -----> 800px Office

　　800px place -----> 400px Office

Fifth, the source code

<!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>

Animation function, an arbitrary element is moved to a specified destination

Guess you like