多个DIV的来回缓冲运动

最新推荐文章于 2021-06-10 18:08:19 发布

weixin_43700362

最新推荐文章于 2021-06-10 18:08:19 发布

阅读量150

点赞数

文章标签：多个div 可以来回缓冲

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103192001

版权

主要思路：

当页面中需要操控多个div缓冲运动的话，我们可以利用函数实现。将实现div运动的代码封装在函数内部，哪个div需要运动，调用函数就可以了。

效果如下图：

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 100px;
            left: 0px;
        }
        #box1{
            top: 50px;
            left: 900px;
        }
        #box2{
            top: 20px;
            left: 800px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>

<script src="ujiuye.js"></script>
<script>

    var box = document.getElementById('box');
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    move(box, 'left', 700);
    move(box1, 'left', 300);
    move(box2, 'left', 550);
    /*
    * 移动函数
    * @param {object} 元素
    * @param {string} 属性
    * #param {number} 目标值
    * */
    function move (ele, attr, target) {

        var timer = setInterval(function () {
            // 获取当前位置
            var current = parseInt(getStyle(ele, attr));

            // 计算速度(先快后慢) 向上取整的目的在 491到500的运动
            var speed = (target - current) / 10; // (目标值-当前值)/10

            // 从左到右 向上取整  从右到左 向下取整
            speed = speed >= 0 ? Math.ceil(speed) : Math.floor(speed);

            // 当前位置+步长
            var cur = current + speed;

            if (cur == target) {
                cur = target;
                clearInterval(timer);
            }
            ele.style[attr] = cur + 'px';

        }, 50);
    }



</script>
</body>
</html>

ujiuye.js代码：

function getStyle (ele, attr) {
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
}

注意事项：

var speed = (target - current) / 10; // (目标值-当前值)/10
存在除法，因此speed会有小数部分。
如果speed不取整的话，div最终到达不了终点。
比如：
从0到700px speed不取整的话 div会停止在691.9px

ujiuye.js代码：

function getStyle (ele, attr) {
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
}

weixin_43700362

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多个DIV的来回缓冲运动

主要思路：当页面中需要操控多个div缓冲运动的话，我们可以利用函数实现。将实现div运动的代码封装在函数内部，哪个div需要运动，调用函数就可以了。效果如下图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ti...
复制链接

扫一扫