DIV的缓冲运动

最新推荐文章于 2020-09-22 12:14:06 发布

weixin_43700362

最新推荐文章于 2020-09-22 12:14:06 发布

阅读量176

点赞数

文章标签： div 运动速度改变

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

版权

div的缓冲运动

大致思路：

和div的平滑运动思路大致相同，不同之处就是缓冲运动的速度会发生改变。
先设置定时器，设置div间隔几秒动多少。
然后引入js文件，得到div的left。
速度设置为变化的值，比如speed = (500 - nowleft) / 10；
设置终点的位置在500px。
当div到了终点，就停止计时器（div不在运动了）。（如果div超过了500px一点，也要把它的left设置为500px）。

代码如下：

<!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;
        }
    </style>
</head>
<body>
<div id="box"></div>

<!--引入js文件，获取到div的目前位置-->
<script src="ujiuye.js"></script>
<script>

    var box = document.getElementById('box');

    var timer = setInterval(function () {
        // 获取当前位置
        var nowleft = parseInt(getStyle(box, 'left'));
//        console.log(nowleft);
        // 计算速度(先快后慢)
        var speed = (500 - nowleft) / 10; // (目标值-当前值)/10

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

        if (cur >= 500) {
            cur = 500;
            clearInterval(timer);
        }
        box.style.left = cur + 'px';

    }, 100);

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

运行结果如下图：

在这里插入图片描述

利用以下代码div可以来回缓冲运动

在style里面设置left大于500px或者小于500px就可以了。

<!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: 100px;
        }
    </style>
</head>
<body>
<div id="box"></div>

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

    var box = document.getElementById('box');

    var timer = setInterval(function () {
        // 获取当前位置
        var nowleft = parseInt(getStyle(box, 'left'));

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

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

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

        if (cur == 500) {
            cur = 500;
            clearInterval(timer);
        }
        box.style.left = cur + 'px';

    }, 100);

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

ujiuye.js文件代码：

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

weixin_43700362

关注

0
点赞
踩
0

收藏

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

div的缓冲运动大致思路：和div的平滑运动思路大致相同，不同之处就是缓冲运动的速度会发生改变。先设置定时器，设置div间隔几秒动多少。然后引入js文件，得到div的left。速度设置为变化的值，比如speed = (500 - nowleft) / 10；设置终点的位置在500px。当div到了终点，就停止计时器（div不在运动了）。（如果div超过了500px一点，也要把它的le...
复制链接

扫一扫