为了账号安全,请及时绑定邮箱和手机立即绑定

为什么向右移动时是向上取整,然后向左移动是向下取整?

为什么向右移动时是向上取整,然后向左移动是向下取整?

正在回答

3 回答

比如移动到的目标值是300px,通过300减去当前的坐标0,再除以20,结果是15,div以15的速度向右移动,这是第一次定时器执行的结果。30毫秒后再执行一次,目标移动到了15,通过300减去当前坐标15结果是285,285除以20结果的14.25,这样一次次运算下来,速度越来越小,比如速度是15、14.25、12.73、7.2。。。。这样的。

由于数值设置的原因,div移动到一定px后,进行相减再除20的运算后会出现小数,比如0.75,比如这时div移动到了290,程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的,会把0.75去掉,那么div的left就成了290,下次执行时div的left是290,算出来速度还是0.75,浏览器又省略了小数,结果就是div停在了290px,到不了目标点300。

为了解决这个问题,Math.ceil就派上用场了,它会把0.75向上取整为1,这样div就又可以向右移动1px了,这时里目标点很近了,就以1的速度慢慢到达300,然后停止定时器。
同理,向左移动,计算出来的速度会是负值比如-0.75,就用Math.floor把速度向下取整为-1,这样,就避免了卡在某个像素点不动的问题。
Math.floor还是ceil这些运算的目的不是要把speed取到0,而是要让浏览器可以继续运算下去,然后用我们的if条件判断,等于itarget了就结束运动。

3 回复 有任何疑惑可以回复我~
#1

DOMOHAHA 提问者

非常感谢!讲的非常清楚
2016-02-22 回复 有任何疑惑可以回复我~
#2

qq_风_54

请问,浏览器会忽略小数的话为什么例子里面会出现190.5px呢
2016-03-13 回复 有任何疑惑可以回复我~
#3

qq_风_54 回复 慕容6759333

非常感谢,这个问题找了好久没找到答案,再次谢谢
2016-03-13 回复 有任何疑惑可以回复我~
查看1条回复

不是还是负的吗?offsetLeft

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

因为向右移动offsetLeft为正值,如果向下取整就会大于目标值,不符合条件,向左同理

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

DOMOHAHA 提问者

不是还是负的吗?offsetLeft
2016-02-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么向右移动时是向上取整,然后向左移动是向下取整?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信