移動框

DEMO

項目描述:移動框，可以移動，並在內容顯示元素在BODY裡的座標

主要用到的元素: pageX/Y() or clientX/Y ，push()，**pop()

源碼在DEMO裡面，這個項目的難點，第一個:如何確定移動框的offsetTop跟offsetLeft並賦值給移動框讓它動起來，第二個:如何讓紀錄移動軌跡，並能透過點擊回放。

分析第一個問題:

因為要讓移動框是動起來的，也就是說它的offsetTop跟offsetLeft是不固定的沒辦法直接賦值，但是當滑鼠點擊移動框在脫跩著移動的期間，滑鼠在盒子內的座標是固定的，也就是說如果用會動的座標(滑鼠相對整個頁面的座標)減去固定座標(滑鼠在盒子內的座標)，就能夠得到盒子會動的座標並賦值讓它動起來。

分析第二個問題:
要能夠實現回放(倒退)就必須獲取到盒子的移動軌跡，要獲取點擊時(mousedown)跟移動時(mousemove)兩個的值才能過自然地動起來。先在數組中存取最開始的值，之後再每次點擊和移動時將座標存入(push)數組中。當點擊時播放順序要從最後再到最初，則能實現倒退功能。此時利用pop的特性*，每次取出最後插入數組中的座標並賦值給盒子，然後再運用setInterval來元素動起來，並限制條件當數組只剩最後一個數值(盒子的最初的位置)，停止動畫。

• pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。