js运动原理2

最新推荐文章于 2022-04-14 22:17:01 发布

原创最新推荐文章于 2022-04-14 22:17:01 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现HTML元素动画的方法。通过设置定时器并利用offsetLeft属性，可以控制div元素在页面上平滑地左右移动。该方法适用于初学者理解基本的DOM操作及事件处理。

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

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position:absolute;
            top: 50px;
            left:0;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: red;
            position:absolute;
            top: 250px;
            left:600px;
        }
    </style>
</head>
<body>
<input id="bt1" type="button" value="开始向右">
<input id="bt2" type="button" value="开始向左">
<div id="div1"></div>
<script type="text/javascript">
     var oBt2=document.getElementById("bt2");
    var oDiv1Timerid=null;
    var oBt=document.getElementById("bt1");
    oBt.onclick= function () {
        var oDiv=document.getElementById("div1");

        clearInterval(oDiv1Timerid); //1. 启动定时器之前，需要清理之前的定时器。

        oDiv1Timerid=setInterval(function(){//启动定时器，并记录返回值（定时器的标识）
            //做运动的部分和清理定时器的部分，放在 if else 里面
            if(oDiv.offsetLeft>600){
                //清理定时器的条件。要注意边界判断！
                clearInterval(oDiv1Timerid);
            }
            else{
                oDiv.style.left=oDiv.offsetLeft+9+"px";
            }
        },30);
    }


    oBt2.onclick= function () {
        var oDiv=document.getElementById("div1");
        clearInterval(oDiv1Timerid);
        oDiv1Timerid=setInterval(function(){
            if(oDiv.offsetLeft<0){
                clearInterval(oDiv1Timerid);
            }
            else{
                oDiv.style.left=oDiv.offsetLeft-9+"px";
            }
        },30);
    }

</script>
</body>
</html>