JavaScript - 缓动动画（移动速度由快到慢）

Codefreyy

已于 2022-03-30 09:41:40 修改

阅读量1.1k

点赞数

分类专栏：课程案例文章标签： javascript 前端 html css

于 2022-03-23 21:00:08 首次发布

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123696106

版权

效果

盒子不是匀速移动的，而是由快到慢，缓缓停下，看起来比较顺滑。

核心代码

 <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn1 = document.querySelector('.button1');
        var btn2 = document.querySelector('.button2');
    
        function move(obj, target, callback) {   //callback是回调参数（见后面
            // 清除多次点击后的定时器，保留最新的那一次
            clearInterval(obj.timer);

            //  使用obj.timer，把timer当作obj的属性，如果使用var timer = ，调用一次就会开辟一次内存空间
            obj.timer = setInterval(function () {
                //对步长向上取整，因为除以10可能有小数
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(s