源码以及代码解释

来源:3-1 JS缓冲动画

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。

写回答 关注

2回答

  • 王不留形
    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)
    }


    qq_风_5...

    既然没有意义,那为什么会出现-190.5呢?

    2016-03-13 00:06:32

    共 1 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题