运动框架的初步应用

最新推荐文章于 2025-06-06 17:11:36 发布

weixin_30736301

最新推荐文章于 2025-06-06 17:11:36 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/redaisy567/p/5957116.html

做一个移动到指定位置后停止的div：需注意两点：

1、在开始运动时，关闭已有定时器

2、把运动和停止隔开（if/else）

<body>
<input type="button" id="btn1" value="开始运动" onclick="startMove()"/>
<div id="div1"></div>
</body>

#div1{

    width:200px;
    height:200px;
    background: red;
    position:absolute;
    top:50px;
    left:0;
}
js代码：

 var timer=null;
 function startMove(){
    var oDiv=document.getElementById('div1');
    clearInterval(timer)  //这一步实现在开始运动时，关闭已有定时器,不然会重复点击速度加快的结果。
   timer= setInterval(function () {
       var speed=1;
        if(oDiv.offsetLeft>=300){
            clearInterval(timer);
        }else{           //这一步把运动和停止隔开;否则到达位置后再点击还会运动。
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    },30);
}