JS简单实现物体缓冲运动

最新推荐文章于 2022-02-28 16:48:42 发布

SevenBug

最新推荐文章于 2022-02-28 16:48:42 发布

阅读量251

点赞数 1

分类专栏：前端文章标签：前端 JS

本文链接：https://blog.csdn.net/weixin_44414835/article/details/93372495

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

点击物体，缓冲运动到指定位置
首先明确目的
何为缓冲，即速度越来越小。
我们就可以拿物体运动的距离跟速度关联起来，从而实现缓冲运动

相关代码如下~~~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 100px;
        height: 100px;
        background: #f40;
    }

    span {
        display: block;
        width: 2px;
        height: 100px;
        background: black;
        margin: 0 auto;
    }
</style>

<body>
    <div>
    </div>
    <span>
    </span>
    <script>
        /* JS实现物体缓冲运动到指定位置 */
        //获取方块div
        var div = document.getElementsByTagName('div')[0];
        //给div设置点击事件
        div.onclick = function () {
            //获取要运动到的距离，我这里让物体运动的span位置上；
            var span = document.getElementsByTagName('span')[0];
            //获取span距离左侧的距离
            var distance = span.offsetLeft;
            //执行函数
            startMove(this, distance);

        }
        //定义一个运动函数
        function startMove(obj, target) {
            //定义一个速度值
            var iSpeed;
            //设置定时器，每隔30毫秒执行一次
            timer = setInterval(function () {
                //定时器每执行一次，iSpeed的值相应作出变化，每一次都用运动的距离减去物体距离左侧的距离
                //随着物体运动的距离变大，iSpeed的值会越来越小，从而实现缓冲运动
                iSpeed = (target - obj.offsetLeft) / 10;
                //当运动到指定位置时，清除定时器
                if (obj.offsetLeft === target) {
                    clearInterval(timer);
                } else {
                    //没运动到指定位置，继续运动
                    obj.style.left = obj.offsetLeft + iSpeed + 'px';
                }
            }, 30)

        }

    </script>
</body>

</html>