JS多物體運動

2021-07-13 10:11:46 字數 1202 閱讀 3108

乙個網頁上肯定不只乙個地方在運動,所以肯定要使用多物體運動這種技巧。其原理是每個物體都有自己的定時器id。

例子:

20個div一起運動.用滑鼠移入移出來控制div的運動,類似於**背景的那種節奏跳動.

如圖:

需要注意的地方:

1.必須給每個div都設定乙個定時器,否則會混亂,設定定時器也有技巧,就是直接給div新增乙個timerid屬性,這可以保證唯一性和易區分性.

2.多個div運動的時候不能共用乙個公有屬性,這樣會出問題,因為每個div都能改變公有屬性,這樣就會變得混亂.解決辦法還是把需要的公有屬性分別設定成每個div獨有的屬性.

html**:

class="show"

id="show">

id="div1">div>

id="div2">div>

id="div3">div>

id="div4">div>

id="div5">div>

id="div6">div>

id="div7">div>

id="div8">div>

id="div9">div>

id="div10">div>

id="div11">div>

id="div12">div>

id="div13">div>

id="div14">div>

id="div15">div>

id="div16">div>

id="div17">div>

id="div18">div>

id="div19">div>

id="div20">div>

div>

css**:

*

.show

div

js**:

window.onload = function

() ;

adiv[i].onmouseout = function

()

}function

startmove

(obj,itag)

,30);}}

js多物體運動

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

js實現多物體不同運動框架

歡迎各位親們賞臉 我們都知道,中有很多的運動,其需求不同,但大體結構類似。如果我們把每個功能模組都寫出來,不僅浪費時間,而且浪費很多 空間,增加 冗餘,使 顯得雜亂無章。今天我們就來寫乙個框架,將不同的運動封裝成乙個方法,讓不同的運動共用這乙個方法,節省時間 空間。而且,這個框架一旦完成,無論何時想...

JS多物體運動控制和誤區

非勻速運動,obj.timer和obj.alpha,即定時器與透明度 function startmove obj,itarget else 30 timer和alpha在多個div中不能共用,即自己用自己最安全js中offset系列的誤區 div1 div1 head 第一種的offsetwidt...