首頁 > web前端 > js教程 > JS運動框架的封裝過程(實例程式碼

JS運動框架的封裝過程(實例程式碼

零下一度
發布: 2017-06-25 09:18:42
原創
1316 人瀏覽過

給大家出一題,從起點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動起來。

特定程式碼如下:               

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板