Steveberg
2015-11-13 14:37
之所以要求向上取整数的原因很简答,你看到最后的时候就出现了老师所讲的-190.5px,首先你需要明白的是为什么停止在了190.5px,因为这里(-200-(-190))/20=-0.5px,这里出现了最小的速度-0.5px,之前的速度都是大于-1px的,而CSS中最小的PX就是1px,所以在这里没有意义。在接下来的过程中出现的速度px也是一直小于1px。所以我们的解决办法是向上取1,用Math.floor().遇到-0.几的速度取-1px,这样最后-190px就会慢慢地以1px的速度往上变成-200px。
多谢解惑,一直在想为什么取整就可以解决
window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-200); } } var timer=null; function startMove(iTarget){ clearInterval(timer);//清空所有定时器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ speed=(iTarget-oDiv.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); alert(Math.floor(-0.5));//可以查看最后的变化是1px速度 if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+speed+"px";} }, 10) }
JS动画效果
113925 学习 · 1443 问题
相似问题