JS push 到指定位置停止
一、HTML
<div id="div1"></div>
<input id="btn1" type="button" value="开始移动" />
<div id="div2"></div>
二、CSS
*{margin: 0;padding: 0;}
#div1{
width: 100px;height: 90px;background: red;
position: absolute;left: 0;top: 50px;
}
#div2{
width: 1px;height: 200px;background: black;
position: absolute;left: 300px;top: 0;
}
三、javascript
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var timer=null;
oBtn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
if (oDiv.offsetLeft>=300) {
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+5+'px';
}
},30)
}
}
四、最终效果
