滑块运动 — 上下

最新推荐文章于 2023-03-03 17:17:52 发布

erdouzhang

最新推荐文章于 2023-03-03 17:17:52 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/76263716

js 专栏收录该内容

98 篇文章

订阅专栏

该博客介绍了如何通过HTML、CSS和JavaScript实现滑块元素的上下运动。内容包括判断当前位置与目标点的位置关系，以确定滑动速度的方向，确保在编程时无需考虑速度的正负号问题。

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

这里写图片描述

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);}            

    function doMove(obj,attr,dir,target){//参数分别代表：元素、上下左右方向运动、方向（正反方向）、目标点

        // 判断是正方向运动还是反方向运动，这样传实参的速度时就不用写正负号
        dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;

        // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动
        clearInterval(obj.timer);       
        obj.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下
            var speed = parseInt(getStyle(obj,attr)) + dir;//速度

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

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

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

    $('btn1').onclick = function(){
        doMove(div1,'top',12,300);
    }
    $('btn2').onclick = function(){
        doMove(div1,'top',12,40);
    }
// 封装获取某个元素的样式函数
function getStyle(obj,attr){//obj:你要获取谁，attr:所获取的对象的什么样式
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

注意：
1、如果当前位置比目标点位置小（当前位置0，目标点位置300），那么是正数；
如果当前位置比目标点位置大（当前位置300，目标点位置0），那么是个负数；
判断速度正反方向：dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir; 这样在传参速度时就不用考虑正负号问题，统一都写正数；