问答详情
源自:3-1 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 14:37

个回答

  • 王不留形
    2016-01-03 17:38:48

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

  • Steveberg
    2015-11-13 14:48:09

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