JS運動應用

2022-06-14 05:30:14 字數 2162 閱讀 1532

------------恢復內容開始------------

多種物體同時運動:

例子:多個div,滑鼠移入變寬

單定時器,存在問題

每個div乙個定時器

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

divstyle

>

<

script

>

window.onload

=function

() ;

odiv[i].onmouseout

=function

() }}

function

starmove(obj,itarget)

else

},30)

}script

>

head

>

<

body

>

<

div>

div>

<

div>

div>

<

div>

div>

body

>

html

>

多物體運動框架

定時器作為物體的屬性

引數的傳遞:物體、目標值

例子:多個div淡入淡出

所有東西都不能共用

屬性與運動物件繫結:速度、其他屬性值(如透明度)

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

divstyle

>

<

script

>

window.onload

=function

() ;

odiv[i].onmouseout

=function

() }

}//var alpha = 30;所有的東西都不能公用

function

startmove (obj,itarget)

else

},30)

}script

>

head

>

<

body

>

<

div>

div>

<

div>

div>

<

div>

div>

<

div>

div>

body

>

html

>

JS運動應用

例子 多個div,滑鼠移入變寬單定時器,存在問題 每隔div乙個定時器 多個div邊寬還原 window.onload function else 30 像這樣的程式還是存在問題的,如果樣式中含有border,在取offsetwidth的時候系統會把width和border的畫素加在一起,這樣計時器...

JS運動 運動基礎(緩衝運動)

1 手風琴效果 分析 2 基礎緩衝運動 接下來取整 原因 px為計算機識別的最小單位,1px無法再往下拆分。所以css如果取值200.5px,解析時計算機會自動將其改為200px 注意 這裡的數值並沒有四捨五入計算,200.9px最後依然是200px 速度不能是小數,需要取整,所以接下來進行取整 因...

js運動之緩衝運動

裡面核心就是讓他的速度與距離成為正比 距離大,速度大 距離小,速度小 距離 目標 原始 緩衝運動一定要取整 先來個例子 id div1 div type button value 緩衝運動 onclick startmove div1 style var timer null function st...