彈性運動框架

2021-09-28 11:29:56 字數 2327 閱讀 6203

彈性運動框架,多物體,單物體

>9.彈性運動框架

title

>

8<

meta

name

="author"

content

="administrator"

/>910

<

style

>11*

12#div1

13#line

14style

>

15head

>

16<

body

>

17<

div

id="div1"

>

div>

18<

div

id="line"

>

div>

19<

script

>

2021/**

23if(!obj.ospeed)obj.ospeed={};

24如果obj物件上沒有ospeed這個自定義屬性,就定義乙個。值是乙個空物件,可以理解為是乙個空json。

2527

if(!obj.ospeed[attr])obj.ospeed[attr]=0;

29上面已經定義自定義ospeed屬性了,所以這裡是判斷這個自定義屬性裡有沒有attr這個屬性,沒有的話就定義乙個,並設定初始值為0。30*

*/31

32var

odiv1

=document.getelementbyid(

'div1');

3334

//aa(odiv1,'left',500);

3536

bb(odiv1,)

3738

/**多物體彈性運動框架*

*/39

function

bb(obj,json);

50if( !

obj.ispeed[attr] ) obj.ispeed[attr]=0

;5152var

itarget

=json[attr];

53var

icur

=parseint( getstyle( obj,attr ) );

5455

obj.ispeed[attr]

+=(itarget

-icur)/6;

56obj.ispeed[attr]

*=0.75;57

58if

( math.abs(obj.ispeed[attr])

<=1&&

math.abs( itarget

-icur )

<=1)

else 67

document.title

=icur +'

-'+obj.ispeed[attr];

68/*

***塊*

*/69}70

71if

( ibtn )

7576

77},30)

78}7982

/**單物體 彈性運動框架*

*/83

function

aa(obj,attr,itarget)

else

104document.title

=icur +'

-'+obj.ispeed;

105106

},30

)107

}108

109110

/**getstyle getstyle 是帶單位的,所以一定要結合parseint來使用*

*/111

function

getstyle ( obj, attr )

112113

114script

>

115body

>

116html

>

彈性運動 學習筆記

運動在js中,只需要開了個定時器,並且不斷的改變物件的left和top值就可以了。當然,物件必須是相對定位的元素。js 如下,例1 window.nl ad function 30 在上例中可以發現物件每隔30毫秒就改變一下自身的left值,5的勻速增值下去。我們可以設定乙個變數做為速度來代替5,如...

js運動框架

第一次寫部落格希望諒解 js的運動框架其實就是對於元素的位置的改變 1 理解style和offsetstyle的區別 2 json和fon in的運用 3 數學知識的理解 4 對定時器的理解和運用 js function getstyle obj,name else 新增乙個函式引數讓能夠實現多個物...

簡易運動框架

簡易的運動框架可以用來控制長寬高 位置 透明度,結合定時器可以實現簡單的動畫。其中最主要也是最基礎的就是獲得元素的屬性,我們先來看一下給元素新增樣式的三種方法 行內樣式 嵌入式樣式 外鏈樣式表 1 doctype html 2 html lang en 3 head 4 meta charset u...