彈性運動框架,多物體,單物體
>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...