滑块运动 — 左右

最新推荐文章于 2025-10-08 13:14:24 发布

原创最新推荐文章于 2025-10-08 13:14:24 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript来实现滑块的左右运动。作者强调了在封装功能时的注意事项，包括将相同功能抽象为函数，列出不同之处并用参数进行封装，以及针对大于号和小于号的特殊处理。示例中，滑块根据步长、目标位置和速度方向进行动态调整。

这里写图片描述

html：

<input type="button" value="向右滑动" id="btn1">
<input type="button" value="向左滑动" id="btn2">
<div id="div1"></div>

css：

#div1 {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 30px;         
}

js：

function $(id){return document.getElementById(id);}

// 向前与向后之间的区别：div1  12   800   > 
//                    div1  -10   10   <

    function doMove(obj,dir,target){//参数分别代表：元素、方向（正反方向）、目标点
        // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动
        clearInterval(obj.timer);
        // alert(getStyle(div1,'left'));//30px   测试下面写的函数是否可以正常执行
        // alert(parseInt(getStyle(div1,'left')));//30  parseInt()把 '30px' => 30 
        obj.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下
            var speed = parseInt(getStyle(obj,'left')) + dir;//速度

            //在赋值之前先限制最终距离，如果超过300，那么让其等于300
            if(speed > target && dir > 0){//往前跑
                speed = target;
            }
            if(speed < target && dir < 0){//往后跑
                speed = target;
            }

            obj.style.left = speed + 'px';//点击一下按钮，红色方块向前进10px;

            // 当left值大于300时，关闭定时器让红色方块停止
            if(speed == target){//如果到达300，关闭定时器
                clearInterval(obj.timer);
            }
        },30);
    }

    $('btn1').onclick = function(){//点击btn1调用函数，并传参
        doMove(div1,12,300);
    }
    $('btn2').onclick = function(){//点击btn2调用函数，并传参
        doMove(div1,-12,10);
    }

// 封装获取某个元素的样式函数
function getStyle(obj,attr){//obj:你要获取谁，attr:所获取的对象的什么样式
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

注意：
1、如果是相同的功能那么就要封装函数；
2、封装函数前，首先完成一个功能，然后把两个功能有区别的地方列出来，然后用参数进行封装；
3、大于号、小于号不能用参数封装，如果有那么就用if判断（如上面的例子）；
4、div1 12 800 > 分别代表：元素，12是一次向右增加12px（步长），800是目标位置，大于号是进行速度判断的（如果速度大于0向右运动，速度小于0向左运动）