【javascript-基础小练习】减速（缓冲）封装运动函数多元素多属性

最新推荐文章于 2024-09-16 22:49:41 发布

草率怪199888

最新推荐文章于 2024-09-16 22:49:41 发布

阅读量357

点赞数 1

分类专栏： javaScript基础学习

本文链接：https://blog.csdn.net/qq_66972523/article/details/123433014

版权

JavaScript 缓冲运动动态计算步长运动函数事件处理

关键词由CSDN通过智能技术生成

javaScript基础学习专栏收录该内容

38 篇文章 2 订阅

订阅专栏

- 核心：动态计算步长，随着时间的变化，步长减少
- 封装运动函数（缓冲效果）

    <style>
        .box1 {
            width: 100px;
            background-color: pink;
            position: absolute;
            height: 100px;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

java Script部分

<script>
    var box1 = document.querySelector('.box1');
    var target = 400;
    var t;
    box1.onmouseover = function () {
        //链式运动
        move(box1, {
            left: 500,
        }, function () {
            move(box1, {
                top: 500,
            }, function () {
                move(box1, {
                    left: 0,
                }, function () {
                    move(box1, {
                        top: 0,
                    })
                })
            })
        })
    }

    //多元素多属性运动，运动结束后，要执行的功能
    function move(ele, obj, cb) {
        clearInterval(ele.t);
        ele.t = setInterval(function () {
            //假设计时器一定要清除
            var flag = true;
            //在计时器内部解析对象
            for (var i in obj) {
                var now = parseInt(getStyle(ele, i));
                var speed = (obj[i] - now) / 7;
                speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                ele.style[i] = now + speed + 'px';
                //判断是否有属性没到目标，有就取消清除
                if (now !== obj[i]) {
                    flag = false;
                }
                //是否要清除
                if (flag) {
                    clearInterval(ele.t)
                    cb && cb();
                }
            }
        }, 30)
    }

    //获取非行内样式封装
    function getStyle(ele, attr) {
        if (ele.currentStyle) {
            return (ele.currentStyle[attr]);
        } else {
            return (getComputedStyle(ele)[attr]);
        }
    }
 </script>