运动框架的初步应用

做一个移动到指定位置后停止的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);
}


 

posted @ 2016-10-13 16:58  后甜先苦  阅读(123)  评论(0)    收藏  举报