JS缓冲运动

本文通过一个简单的示例展示了如何使用HTML、CSS及JavaScript实现元素的动态位置改变效果。利用CSS设置基本样式,并借助JavaScript来精确控制元素的位置移动,从而实现平滑的动画效果。文中代码详细介绍了如何响应按钮点击事件,使一个矩形块从初始位置移动到设定的目标位置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: #CCC;
            position: absolute;
            left: 0px;
        }
        #div2{
            width: 1px;
            height: 500px;
            background: black;
            position: absolute;
            left: 500px;
        }
        #div3{
            width: 1px;
            height: 500px;
            background: black;
            position: absolute;
            left: 900px;
        }
    </style>
    <script>
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oBtn1=document.getElementById("btn1");
            var oBtn2=document.getElementById("btn2");
            oBtn1.onclick=function (ev) {
                move(500);
            }
            oBtn2.onclick=function (ev) {
                move(900);
            }

        }
        function move(target) {
            var oDiv1=document.getElementById("div1");
            var timer=null;
            var speed;
            clearInterval(timer);
            timer=setInterval(function () {
                speed=(target-oDiv1.offsetLeft)/10;
                if(speed>0)
                {
                    speed=Math.ceil(speed);
                }
                else
                {
                    speed=Math.floor(speed);
                }
                if(Math.abs(target-oDiv1.offsetLeft)==0)

                {
                 //   oDiv1.style.left=target+'px';     //匀速运动的时候,如果靠不到目的地前,差点距离也行,然后使用障眼法
                    clearInterval(timer);
                }
                else
                {
                    oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
                }
            },30);
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="500">
<input type="button" id="btn2" value="900">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值