滚动的滑块来回（封装）

最新推荐文章于 2024-08-11 01:13:17 发布

吴机智

最新推荐文章于 2024-08-11 01:13:17 发布

阅读量50

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108502974

版权

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0.1px;
        }
    </style>
</head>

<body>
    <button>向前移动</button>
    <button>向后移动</button>
    <div></div>
    <script src="./ujiuye.js"></script>
    <script>
        // 效果: 点击按钮，让块从0的位置移动到1000的位置并停止
        // 获取元素
        var btn = document.getElementsByTagName('button');
        var div = document.getElementsByTagName('div')[0];
        console.log(btn, div);
        var timer = null;
        // 点击按钮
        btn[0].onclick = function () {
            move(div, 'left', 10, 1000, 20);
        }

        // 点击向后移动按钮, 让div从1000的位置回到0
        btn[1].onclick = function(){
            move(div, 'left', 10, 0, 20);
        }

        function move(elem, attr, speed, target, tim){
            /* 
                elem: 元素
                attr: 属性
                speed: 每次移动的距离
                target: 目标
                tim: 时间
            */
            clearInterval(timer);
            var cur = parseFloat(getStyle(elem, attr));
            // 速度的判断: 当前值和目标值, 如果当前大于目标值，速度是负数, 如果目标值大于当前值, 速度是正数
            speed = cur > target ? -speed : speed;
            timer = setInterval(function () {
                // 当前位置
                var l = parseFloat(getStyle(elem, attr)) + speed; // 10  + (-10)
                // 判断, 判断当前l是否大于等于1000, 需要清除定时器
                if((speed < 0 && l <= target) || (speed > 0 && l >= target)){
                    l = target;
                    clearInterval(timer);
                }
                // 将l赋值给elem的left
                elem.style[attr] = l + 'px';
            }, tim);
        }
    </script>
</body>

</html>