10-小球移动

最新推荐文章于 2024-08-26 16:38:21 发布

沈川希

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量209

点赞数

分类专栏： DOM基础文章标签： js javascript dom

本文链接：https://blog.csdn.net/weixin_45344023/article/details/107880443

版权

DOM基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

小球移动

简述：小球向一个方向定向移动

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/animate.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="box1" id="box1"></div>
    <div class="box2" id="box2"></div>
</body>
</html>

css部分

   *{margin: 0; padding: 0;}
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            border-radius: 50%;
            top: 0px;
            left: 500px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            border-radius: 50%;
            top: 150px;
            left: 0px;
        }

js部分

<script>
        let box1 = document.getElementById("box1"),
            box2 = document.getElementById("box2");
            console.log(box1);

            animateMoudle.init(box1,0);
            animateMoudle.init(box2,500);

    </script>

animate.js

let animateMoudle = (function () {
    /*
    *  功能：让一个盒子水平运动起来
    *  参数1：盒子   参数2：目标位置
    * */
    function animate(obj, target) {
        clearInterval(obj.timer); // clearInterval(und) 也不会报错
        obj.timer = setInterval(function () {
            let step = 9; // 步长
            let current = obj.offsetLeft; // 得到盒子相对于参考点的偏移量
            step = target >= current ? step : -step;  // 此时step要么是正10  要么是-10
            if (Math.abs(target - current) >= Math.abs(step)) {
                // 距离目标的距离 至少还大于一个步长
                current += step;
                obj.style.left = current + "px";
            } else {
                // 距离目标的距离 已经小于了一个步长
                obj.style.left = target + "px";
                clearInterval(obj.timer);
            }
        }, 17)
    }

    return {
        init:animate
    }
})();

运行效果

小球运动前
在这里插入图片描述小球运动后

沈川希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-小球移动

小球移动简述：小球向一个方向定向移动html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/animate.js"></script>
复制链接

扫一扫

专栏目录