点击按钮实现元素移动到指定位置

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            margin-top: 20px;
        }

        #dv {
            position: absolute;
            width: 100px;
            height: 100px;
            margin-top: 30px;
            background-color: greenyellow;
        }

    </style>
<input type="button" id="btn1" value="移动400">
<input type="button" id="btn2" value="移动800">
<div id="dv"></div>
<script>
    my$("btn1").onclick = function () {
        animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
        animate(my$("dv"), 800);
    };

    function animate(element, target) {
        //无论有没有定时器,先清理
        clearInterval(element.timeId);
        //防止多次点击按钮时产生多个定时器
        element.timeId = setInterval(function () {
            //获取div当前位置
            var current = element.offsetLeft;
            //设置每次div移动的像素
            var step = 9;
            //当前位置如果小于目标位置就前进否则就后退
            step = current < target ? step : -step;
            //每次移动后的距离
            current += step;
            //判断当前移动后的位置是否到达目标位置(Math.abs方法是绝对值)
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                //如果当前位置与目标位置距离小于每次移动像素,直接将目标位置赋值
                element.style.left = target + "px";
            }
        }, 20);
    }
</script>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页