11,運動基礎框架(勻速)

2022-09-08 19:48:09 字數 1208 閱讀 4932

勻速運動(框架):給物體不斷加速度,用setinterval來迴圈執行;

用timer來儲存setinterval返回的id值;clearinterval(timer);清除定時器,讓運動停止。用if else 來判斷運動是移動還是停止;

每執行一次事件(點選按鈕)要清楚一次定時器,防止定時器疊加使速度不斷加快;

<

body

>

<

input

id="btn1"

type

="button"

value

="開始運動"

onclick

="startmove()"

/>

<

div

id="div1"

>

js**:

練習:分享到

滑鼠移入移出,改變div的左側距離(用勻速運動框架);用當前的左側距離odiv.offsetlef與目標點itarget比較;藉以判斷速度方向,odiv.offsetleft當到達目標點時,關閉定時器,運動停止;

html:

<

body

>

<

div

id="div1"

>

<

span

>分享到

span

>

div>

css:right:-20;

js:

練習2:淡入淡出;

改變的透明度:opacity來實現;用運動框架改變opacity;當前的透明度用乙個變數儲存:alhpa=30;比較alpha與itarget目標值之間大小來確定速度方向。

透明度變化過程:alpha+=ispeed;變化的是alpha,再將該值賦值給odiv.style.filter:(ie)或者odiv.style.opacity;

html:

<

body

>

<

div

id="div1"

>

div>

body

>

js:

JS勻速運動

所謂的勻速運動就是速度不變的,比如無縫滑動展示就是勻速運動.這種運動的特點就是簡單,呆板,不炫麗.例子 div勻速運動.效果如圖 要注意的地方 1.有些時候不能精確的停在某個位置,所以當距離目標位置很近的時候直接強行把它移到到目標位置就可以了.2.開啟定時器的時候一定要先清除原來的定時器,不然速度會...

js勻速運動

勻速運動 封裝勻速運動原理 設定定時器,將傳入的ele,設定乙個速度,使用定時器獲取當前時間的乙個位置,加上速度值,給回節點,當節點到達目標位置,判斷給他清除定時器。github 下面封裝好的勻速運動的 勻速運動 function getstyle obj,attr function dogo ob...

打造通用的勻速運動框架 例項講解

本文,是接著上基於勻速運動的例項講解 側邊欄,淡入淡出 繼續的,在這篇文章的最後,我們做了2個小例項 側邊欄與改變透明度的淡入淡出效果,本文我們把上文的animate函式,繼續改造,讓他變得更加的通用和強大 1,支援多個物體的運動 2,同時運動 3,順序運動 這三種運動方式也是jquery中anim...