                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

源码以及代码解释

之所以要求向上取整数的原因很简答，你看到最后的时候就出现了老师所讲的-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。

Steveberg

2015-11-13

源自：JS动画效果 3-1

关注问题我要回答

720

操作

收起

2 回答

王不留形
2016-01-03

多谢解惑,一直在想为什么取整就可以解决

0 回复有任何疑惑可以回复我~

收起回答

Steveberg 提问者
2015-11-13

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)
}