二阶段JavaScript-Day17知识点整理(运动、运动封装)

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍如何使用JavaScript实现网页元素的动画效果，包括简单的手动控制移动和封装通用的动画函数。通过定时器和offsetLeft属性控制元素的位置变化，实现平滑过渡。

1.运动

让一个元素在页面中上下左右运动，设置定时器，每隔一定的时间改变物体的left值和top值即可。

    var oBtn = document.querySelector('button')
    var oDiv = document.querySelector('div')

       oBtn.onclick = function(){
        //  让物体向前移动5px    每点击一次，向前移动5px
         oDiv.style.left = oDiv.offsetLeft + 5 +"px";
       }

    oBtn.onclick = function () {
        setInterval(function () {
            oDiv.style.left = oDiv.offsetLeft + 5 + "px";
        }, 100)
    }

    // oBtn.onclick = function () {
    //     setInterval(function () {
    //         // 1. 获取左偏移量 
    //         var leader = oDiv.offsetLeft;
    //         // 2. 设置速度
    //         var speed = 5;
    //         // 3. leader发生变化
    //         leader = leader +speed;

    //         oDiv.style.left = leader + "px";
    //     }, 15)
    // }

    var timer = null;
    oBtn.onclick = function () {
        clearInterval(timer);//每次定时器开启之前，清除上一次的定时器
        timer = setInterval(function () {
            // 1. 获取左偏移量 
            var leader = oDiv.offsetLeft;
            // 2. 设置速度
            var speed = 1;
            // 3. leader发生变化
            leader = leader + speed;
            
            // 4. 设置中止条件
            if (leader >= 1200) {
                leader = 1200;//当你的左偏移量大于等于500。leader一律按照500处理
                clearInterval(timer);//到终点时，记得清除定时器
            }
            console.log(timer);
            // 5. 把改变后的左偏移量赋值给left
            oDiv.style.left = leader + "px";
        }, 15)
    }

2.运动封装

var oBtn = document.querySelectorAll('button')
    var oDiv = document.querySelector('div')
    var timer = null;
    oBtn[0].onclick = function () {
        animate(oDiv, 800);
    }
    oBtn[1].onclick = function () {
        animate(oDiv, 100);
    }

    // // // 反向运动的封装
    // function animate(obj, target) {
    //     clearInterval(timer)
    //     timer = setInterval(function () {
    //         //    1. 获取物体初始的左偏移量
    //         var leader = obj.offsetLeft;
    //         //    2. 设置速度
    //         var speed = -5;
    //         //    3. 让左偏移量变化
    //         leader = leader + speed;//795
    //         //    4. 运动到哪里停止
    //         if (leader <= target) {
    //             leader = target
    //             clearInterval(timer)
    //         }
    //         //   5. 把运动后的leader赋值给left
    //         obj.style.left = leader + "px"
    //     }, 15)
    // }

    // // 正向运动的封装
    // function animate(obj, target) {
    //     clearInterval(timer)
    //     timer = setInterval(function () {
    //         //    1. 获取物体初始的左偏移量
    //         var leader = obj.offsetLeft;
    //         //    2. 设置速度
    //         var speed = 5;
    //         //    3. 让左偏移量变化
    //         leader = leader + speed;//795
    //         //    4. 运动到哪里停止
    //         if (leader >= target) {
    //             leader = target
    //             clearInterval(timer)
    //         }
    //         //   5. 把运动后的leader赋值给left
    //         obj.style.left = leader + "px"
    //     }, 15)
    // }


    // 正反向
    function animate(obj, target) {
        clearInterval(timer)
        timer = setInterval(function () {
            //    1. 获取物体初始的左偏移量
            var leader = obj.offsetLeft;
            //    2. 设置速度
            var speed = target > leader ? 5 : -5;//当你的目标位置大于你的物体位置时，取得是正值，否则是负值
            //    4. 运动到哪里停止
            if (speed >= 0) {
                if (leader >= target) {
                    leader = target
                    clearInterval(timer)
                }
            } else {
                if (leader <= target) {
                    leader = target
                    clearInterval(timer)
                }
            }
            //    3. 让左偏移量变化
            leader = leader + speed;//795

            //   5. 把运动后的leader赋值给left
            obj.style.left = leader + "px"
        }, 15)
    }