标签：编写 element osi 位置 doc 开始 int cti html
运动的原理:js定时器对dom元素的操作,来改变元素的状态.
代码编写时需要注意到的问题:如果是对位置的修改,就不能忘记加上‘px‘,否则,就浏览器不会出错,元素的位置也不会改变
下面是css代码:
#div{width: 100px; height: 100px; background: skyblue;position: absolute;top: 50px;left: 0px;} #line{width: 1px; height: 100px; background: tomato;position: absolute;top: 50px;left: 300px; }
这里是html代码:
1 <div id="div">ceshi</div> 2 <button id="btn1">开始</button> 3 <button id="btn2">停</button> 4 <div id="line"></div>
下面是js代码:
<script>
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var div=document.getElementById("div");
oBtn1.onclick=function(){
startMove(div,8);
}
oBtn2.onclick=function(){
stopMove(div);
}
function startMove(obj,sx){
stopMove(obj);
obj.timer= setInterval(
function(){
if(obj.offsetLeft>=300){//此种判断方式不自然,有一种突然跳到300像素的感觉
stopMove(obj);
obj.style.left=300+‘px‘;
}else{
obj.style.left=obj.offsetLeft+sx+‘px‘;
}
},10
)
}
function stopMove(obj){
clearInterval(obj.timer);
}
</script>
方式二
function startMove(obj,sx){ stopMove(obj); obj.timer= setInterval( function(){ if(300-obj.offsetLeft<sx){//看起来比较自然 stopMove(obj); obj.style.left=300+‘px‘; }else{ obj.style.left=obj.offsetLeft+sx+‘px‘; } },10 ) }
标签：编写 element osi 位置 doc 开始 int cti html
原文地址：https://www.cnblogs.com/weikemudan/p/10207415.html
