匀速动画封装

最新推荐文章于 2024-03-23 14:47:09 发布

mj_leona

最新推荐文章于 2024-03-23 14:47:09 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/mj_leona/article/details/79676329

版权

<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box1"></div>

</body>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box1{
        position: absolute;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
    }
</style>

<script>
    function $(id) {
        return document.getElementById(id)
    }
    $("btn200").onclick = function () {
        animate($("box1"),200)
    };
    $("btn400").onclick = function () {
        animate($("box1"),400)
    };
    function animate(obj,target) {
        var timer = null;  //定义定时器
        timer = setInterval(function () {
            result = obj.offsetLeft>target?-5:5;      //判断盒子运动方向
            obj.style.left = obj.offsetLeft+result+ "px";
            if(Math.abs(obj.offsetLeft-target)<=5){      //何时关闭定时器，理论上是当obj.offsetLeft == target 时关闭定时器，但是obj.offsetLeft是5的倍数
                clearInterval(timer);
                obj.style.left = target + "px";
            }
        },30)
    }
</script>