CSS3实现滑块匀速向右运动-优快云博客

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

这篇博客介绍了如何通过HTML、CSS和JavaScript实现一个点击按钮后，红色方块向右匀速运动的效果。重点在于利用CSS3动画和JavaScript控制元素运动，同时避免用户连续点击导致的加速问题。通过在元素上添加timer属性作为开关，并在点击时关闭定时器，确保滑块始终保持匀速前进。

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

这里写图片描述

点击按钮，红色方块向右运动；无论怎么连续点击按钮，滑块始终匀速前进

html：

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

css：

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

js：

//封装获取id的函数
function $(id){return document.getElementById(id);}

$('btn').onclick = function(){
    // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动
    clearInterval(div1.timer);
    // alert(getStyle(div1,'left'));//30px   测试下面写的函数是否可以正常执行
    // alert(parseInt(getStyle(div1,'left')));//30  parseInt()把 '30px' => 30 
    div1.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下
        var speed = parseInt(getStyle(div1,'left')) + 2;//速度

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

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

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

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

注意：
1、原来写定时器时要先设置一个开关var timer = null;，现在可以不用设置开关，直接在要运动的元素后加timer自定义属性来作为开关，如：div1.timer；
2、点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动；
3、如果想让元素在某个固定位置停止，那么要在赋值前先把距离设定好再赋值；

滑块运动 — 向右