                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

787

操作

收起

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