                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么向右移動時是向上取整，然后向左移動是向下取整？

DOMOHAHA

2016-02-17

源自：JS動畫效果 3-1

關注問題我要回答

2771

操作

收起

3 回答

慕容6759333 回答被采納 +3 積分
2016-02-22

比如移動到的目標值是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了就結束運動。