动画函数，为任意一个元素移动到指定的目标位置

一、动画缓冲函数

/**
 * 动画函数
 * 任意一个元素移动到指定的目标位置
 * @param {*} element 任意一个元素
 * @param {*} target  目标位置（number类型）
 */
function animate(element, target) {
    // 先清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        // 获取移动元素当前位置
        var current = my$("dv").offsetLeft;
        // 每次移动距离
        var step = 9;
        step = target > current ? step : -step;
        // 移动后的距离
        current +=step;
        // 判断是否到达目标位置
        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);
}

二、html代码

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

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

三、第三方js文件---common.js

// 根据id获取元素对象
function my$(id){
    return document.getElementById(id);
}

/**
 * 动画函数
 * 任意一个元素移动到指定的目标位置
 * @param {*} element 任意一个元素
 * @param {*} target  目标位置（number类型）
 */
function animate(element, target) {
    // 先清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        // 获取移动元素当前位置
        var current = my$("dv").offsetLeft;
        // 每次移动距离
        var step = 9;
        step = target > current ? step : -step;
        // 移动后的距离
        current +=step;
        // 判断是否到达目标位置
        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);
}

四、效果图

　　初始位置截图

　　初始位置---->400px处

　　400px处----->800px处

　　800px处----->400px处

五、源码

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