js中运动函数的封装

最新推荐文章于 2022-06-08 21:03:36 发布

陈乾cQQ

最新推荐文章于 2022-06-08 21:03:36 发布

阅读量247

点赞数 1

分类专栏： Javascript 文章标签： javascript es6 html5 vue.js node.js

本文链接：https://blog.csdn.net/weixin_49299412/article/details/107575790

版权

Javascript 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div id="box"> </div>

    <script>
        // 运动三要素: 运动对象  运动方向  停止目标
        // ele 运动的元素对象
        // target {left:500,top:400}  运动方向和目标
        // cb 运动结束的回调函数


        //1 获取目标节点
        let boxObj = document.getElementById('box');
        boxObj.onclick = function () {
            moveFn(boxObj, { top: 300, left: 400 }, function () {
                alert('game over')
            })
        }
        var times = '';  //声明遍历接收定时器的返回值
        function moveFn(eleObj, target, cb) {
            //2  清空定时器,避免定时器累加
            clearInterval(times);
            var onOff = false;
            //3 设置定时器
            times = setInterval(function () {
                // 4  遍历运动的方向和目标,方便设置速度
                for (var attr in target) {
                    // console.log(attr, target[attr]); // top,300     left,400
                    var pos = parseInt(getPos(eleObj, attr))
                    //5 声明步长,并且调整
                    var speed = (target[attr] - pos) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //6临界条件判断,到达临界值给开关true,避免直接清空定时器
                    //影响另一个属性运动
                    if (pos + speed == target[attr]) {
                        onOff = true;
                    }
                     //7 给元素属性赋值,让元素动起来
                    eleObj.style[attr] = pos + speed + 'px';
                }          
                    if (onOff) {
                        clearInterval(times)
                        //判断是否有回调函数,存在就调用
                        if (cb) cb()
                    }
            }, 30)
        }


        //获取指定元素非行内样式css属性(兼容模式)
        function getPos(ele, attr) {
            if (ele.currentStyle) {
                return ele.currentStyle[attr]
            } else {
                return getComputedStyle(ele)[attr]
            }
        }
    </script>
</body>

</html>

陈乾cQQ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中运动函数的封装

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
复制链接

扫一扫