【无标题】缓动动画 js

最新推荐文章于 2024-07-20 23:54:17 发布

卡布达i

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量223

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44644708/article/details/123820610

版权

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    <button class="bth500">点击移动500</button>
    <button class="bth800">点击移动800</button>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var bth500 = document.querySelector('.bth500');
        var bth800 = document.querySelector('.bth800');

        function aut(obj, target, callback) {
            //先清除以前定时器，只保留当前的一个定时器执行
            clearInterval(obj.timsrs);
            obj.timsrs = setInterval(function() {
                //步行值写道定时器里面
                //把步行值改为整数 不要出现小数的问题
                //步行值公式：(目标值 - 当前位置) / 10
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timsrs);
                    if (callback) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        bth500.addEventListener('click', function() {
            aut(div, 500);
        })
        bth800.addEventListener('click', function() {
            aut(div, 800, function() {
                div.style.backgroundColor = 'red';
            });
        })
    </script>
</body>