加速运动、减速运动、弹性运动和碰撞运动JavaScript实现

最新推荐文章于 2025-07-07 11:32:04 发布

原创最新推荐文章于 2025-07-07 11:32:04 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请声明出处，谢谢！

文章标签：

#JavaScript #加速运动 #减速运动 #弹性运动 #碰撞运动

JavaScript 同时被 2 个专栏收录

28 篇文章

订阅专栏

运动

10 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现网页元素的不同动画效果，包括加速运动、减速运动、弹性运动及碰撞运动等。通过设置不同速度和方向，使得页面元素能够表现出更丰富和生动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

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

css代码

  * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

JS代码

加速运动

var oBox = document.getElementById("box");

    document.onclick = function () {
        var l = 0;
        setInterval(function () {
            l++;
            oBox.style.left = oBox.offsetLeft + l + 'px';
        }, 30)
    }

减速运动

 var oBox = document.getElementById("box");

    document.onclick = function () {
        var l = 30;
        setInterval(function () {
            l--;
            oBox.style.left = oBox.offsetLeft + l + 'px';
        }, 30)
    }

弹性运动

 var oBox = document.getElementById("box");
    var speed = 0;

    document.onclick = function () {
        move(oBox, 300)
    };

    function move(obj, iTarget) {
        setInterval(function () {
            speed += (iTarget - obj.offsetLeft) / 2;
            //摩擦力
            speed *= 0.8;

            oBox.style.left = oBox.offsetLeft + speed + 'px';
        }, 30)
    }

碰撞运动

 var timer = null;
    var oBox = document.getElementById("box");
    var disX = 10;
    var disY = 8;
    var iw = document.documentElement.clientWidth - oBox.offsetWidth;
    var ih = document.documentElement.clientHeight - oBox.offsetHeight;

    document.onclick = function () {
        timer = setInterval(function () {
            disY += 5;
            var l = oBox.offsetLeft + disX;
            var t = oBox.offsetTop + disY;

            if (l >= iw) {
                disX *= -0.8;
                l = iw;
            }

            if (l <= 0) {
                disX *= -0.8;
                l = 0;
            }

            if (t >= ih) {
                disY *= -0.8;
                disX *= 0.8;
                t = ih;
            }

            if (t <= 0) {
                disY *= -0.8;
                disX *= 0.8;
                t = 0;
            }

            if (Math.abs(disX) <= 1) {
                disX = 0;
            }

            //纯属碰巧
            if (Math.abs(disY) <= 2) {
                disY = 0;
            }

            if (disX == 0 && disY == 0) {
                clearInterval(timer);
            }
            console.log(disY, disX)
            oBox.style.left = l + 'px';
            oBox.style.top = t + 'px';
        }, 30)
    }