JavaScript--缓冲动画

最新推荐文章于 2022-09-15 22:41:58 发布

快乐的小火猴

最新推荐文章于 2022-09-15 22:41:58 发布

阅读量241

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/look857857/article/details/124018608

版权

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

 <button>action</button>
 <div></div>
 <script>
        //匀速运动 公式
        //  新的位置 = 当前位置+步长
        //缓冲动画
        //从快到慢 (减速运动)
        //步长越变越少
        // 步长 = (目标位置-当前位置)/10
        var btn = document.querySelector('button') //接收按钮
        var box = document.querySelector('div') //获取div
            //给按钮添加点击事件
        btn.onclick = function() {
            //在点击事件中写定时器
            let timer = setInterval(() => {
                //在定时器方法里面控制div的移动
                //获取当前div的偏移量
                var currentX = box.offsetLeft
                    //获取步长
                var step = (300 - currentX) / 10
                    //如果当前步长是小于0就是向下取整  如果大于0就向上取整
                step = step > 0 ? Math.ceil(step) : Math.floor(ste