JS運動框架的封裝過程(實例程式碼
- 零下一度原創
- 2017-06-25 09:18:421274瀏覽
給大家出一題，從起點A走到目的地B，一共用了1000毫秒，每一次是30毫秒，請問你在這裡面得到了哪些資訊？
資訊有哪些呢？
第一個，總長度是:1000毫秒
第二個，多久走一次？ 30毫秒
第三個，走的總次數:1000/30
第四個，距離:B-A
第五個，步長：距離/總次數
運動框架的實現想法：就是在一定的時間段裡面改變left、top、width、height，到達目的地之後停止。
可以先思考一下，在頁面裡如何讓div動起來？
思考如下：1、設定div的時候為絕對定位，因為只有絕對定位之後，left、top等值才會在頁面上顯示出來。否則在頁面上看不見div。
2、可以給div設定點選事件，在函數裡面定義總的步數count，總距離dis，速度step=dis/count,還需要設定一個目前的步數，給它進行初始化n =0
3、接著使用計時器setInterval（），以達到div目前的距離，讓祂div動起來。
特定程式碼如下：