运动的原理: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 ???????????????) ???????}js运动
原文地址：https://www.cnblogs.com/weikemudan/p/10207415.html