javascript 多物體任意運動框架

2021-06-27 06:06:07 字數 465 閱讀 7847

每個複雜的運動效果都是由簡單的效果組成的,我們可以為簡單的效果制定乙個框架,也就是寫乙個通用函式,這樣可以對元素的任何屬性進行變換,複雜的效果就可以很容易實現。

注意事項:

當變換元素的透明度時,需要做特殊處理

如果變換元素寬度時,對於有border的元素,如果我們使用obj.offsetwidth來取得元素寬度時,會出現錯誤,因為offsetwidth包括邊框。如果邊框是1px,定時函式中呼叫,obj.style.width=obj.offsetwidth-1+『px』;,我們會發現元素的寬度不僅沒有變小,反而會變大。這也是我們使用我們自定義的getstyle()取得元素寬度的原因,而沒有使用offsetwidth這一類的屬性。

執行效果圖:

javascript 多物體運動

前面我們都是用定時器實現單物體運動,在專案中我們往往不是做單物體運動,而是做多物體多個值變化。這裡我們將通過改變引數實現多物體 任意值的運動。乙個運動框架,可以改變物體的寬度 高度 邊框 字型大小 透明度等等。注意 上面章節中,我們都是用offsetwidth offsetwidth包含邊框和pad...

JS多物體運動

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

js多物體運動

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