javascript 多物體運動

2021-09-13 09:36:58 字數 613 閱讀 3802

前面我們都是用定時器實現單物體運動,在專案中我們往往不是做單物體運動,而是做多物體多個值變化。

這裡我們將通過改變引數實現多物體、任意值的運動。乙個運動框架,可以改變物體的寬度、高度、邊框、字型大小、透明度等等。

注意:上面章節中,我們都是用offsetwidth(offsetwidth包含邊框和padding等)等設定、獲採樣式,因為使用方式簡單,但是如果物體包含border和padding等樣式的時候,就會報錯,所以這裡我們用更加嚴謹的方式currentstyle和getcomputedstyle來獲採樣式。

注意:在電腦中我們並不能真正的儲存一些具體的數值,我們儲存的是一些近似值,比如0.07*100,最終結果並不是7,所以在下面我們會四捨五入轉換為整數。

注意注意:在多物體運動時,定時器和一些引數一定不要共用,否則會到這這個運動沒有完成就被清除然後觸發了其他運動,一些引數也不可以共用,會導致一些引數沒有達到固定值就被重新操作。所以,下例中的定時器都是放在元素上。

變寬變高

文字變大

borderwidth

透明度

javascript 多物體任意運動框架

每個複雜的運動效果都是由簡單的效果組成的,我們可以為簡單的效果制定乙個框架,也就是寫乙個通用函式,這樣可以對元素的任何屬性進行變換,複雜的效果就可以很容易實現。注意事項 當變換元素的透明度時,需要做特殊處理 如果變換元素寬度時,對於有border的元素,如果我們使用obj.offsetwidth來取...

JS多物體運動

乙個網頁上肯定不只乙個地方在運動,所以肯定要使用多物體運動這種技巧。其原理是每個物體都有自己的定時器id。例子 20個div一起運動.用滑鼠移入移出來控制div的運動,類似於 背景的那種節奏跳動.如圖 需要注意的地方 1.必須給每個div都設定乙個定時器,否則會混亂,設定定時器也有技巧,就是直接給d...

js多物體運動

經驗 在多物體運動裡面,所有開始定義為常量的值,都不能通用,比如第乙個案例中的定時器,還有就是多物體淡入淡出時的透明度值。一旦通用就會產生混亂。屬性要與對應的運動物件進行繫結 多物體運動 此時需要注意的是,相對於之前的案例,如果只有乙個定時器,會出現當你快速移動滑鼠時,第乙個物體,還沒有還原完,定時...