js 匀速运动重新复习

最新推荐文章于 2023-08-09 14:11:09 发布

爱生活，爱编程

最新推荐文章于 2023-08-09 14:11:09 发布

阅读量105

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/109714042

版权

javascript基础笔记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

该博客探讨了如何使用CSS实现元素的平滑移动动画。通过调整元素的left属性，实现了从一个位置到另一个位置的匀速运动。文章特别强调了offsetLeft属性只能读取不可设置，以及在处理动画过程中遇到的边界问题。通过代码优化，解决了不同方向运动的处理，并确保了动画的平滑性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            position: absolute;
            left: 700px;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
        
        span {
            position: absolute;
            width: 1px;
            height: 500px;
            left: 300px;
            top: 0px;
            background-color: red;
        }
        
        button {
            margin-top: 200px;
        }
    </style>
</head>

<body>


    <div class="box">


    </div>
    <span></span>
    <button id="move">move</button>
    <script>
        window.onload = function() {
            var oBox = document.querySelector(".box");
            var oButton = document.querySelector("#move");
            var speed = 13;
            var target = 300;
            oButton.addEventListener("click", function() {
                // 根据左右位置计算速度
                var speed = target > oBox.offsetLeft ? 7 : -7;
                oBox.timer = setInterval(function() {

                    // offsetLeft 的值是只读属性，不能被修改，
                    // 所以说left 始终等于 0px ,所以动画失效！
                    // oBox.offsetLeft += speed;
                    // oBox.style.left = oBox.offsetLeft + "px";

                    //修改如下操作
                    var left = oBox.offsetLeft + speed;

                    // 边界处理问题！
                    // if (speed > 0) {
                    //     // 解决边界处理问题！
                    //     if (left >= target) {
                    //         clearInterval(oBox.timer)
                    //         oBox.timer = null;
                    //         oBox.style.left = target + "px";
                    //     } else {
                    //         oBox.style.left = left + "px";
                    //     }
                    // } else {
                    //     if (left <= target) {
                    //         clearInterval(oBox.timer)
                    //         oBox.timer = null;
                    //         oBox.style.left = target + "px";
                    //     } else {
                    //         oBox.style.left = left + "px";
                    //     }
                    // }

                    // 对上面代码进行优化处理

                    if (Math.abs(left - target) < Math.abs(speed)) {
                        clearInterval(oBox.timer)
                        oBox.timer = null;
                        oBox.style.left = target + "px";
                    } else {
                        oBox.style.left = left + "px";
                    }


                }, 50)

            })
        }
    </script>
</body>

</html>

重点， 1 offsetLeft 值不能设置，只能读取

2，匀速运动，有两个方向，要进行分别处理

3，当我们分别处理后，发现，代码没有多大区别，这个时候，要进行代码合并操作