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动画效果
113909 学习 · 1502 问题
相似问题