簡易運動框架

2022-02-26 06:41:43 字數 2527 閱讀 6933

簡易的運動框架可以用來控制長寬高、位置、透明度，結合定時器可以實現簡單的動畫。

其中最主要也是最基礎的就是獲得元素的屬性，我們先來看一下給元素新增樣式的三種方法：行內樣式、嵌入式樣式、外鏈樣式表

1


doctype html


>


2<


html 


lang


="en"


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>document


title


>67


<


link 


style


="stylesheet"


href


="style.css"


type


="text/css"


/>89


<


style


>


10div


13style


>


14head


>


15<


body


>


1617


<


div 


style


="width:200px;"


>


div>


18body


>


19html


>
我們要獲取元素的樣式可以使用 obj.style.xx,但是這個方法只能獲取行內樣式。

1
所以我們要想獲得元素的樣式，style是不夠的所以引用了currentstyle（ie）方法和getcomputedstyle方法

定義乙個獲取元素樣式的通用函式：

1


function


getstyle(obj,attr);
開始寫domove函式首先domove接受的引數

1 domove(obj,attr,dir,target,endfn)
obj是要進行操作的物件

attr是要操作的屬性

dir是要改變元素屬性的速度（在一段時間內改變多少）

target屬性改變的目標值

endfn是**函式

首先，我們先要判斷dir的正負，如果元素現在的屬性值要是小於目標值則attr為正，否則為負數

注意：用getstyle()函式返回的是字串，所以要用parseint轉換為數字

1             dir = parseint(getstyle(obj,attr)) < target ? dir : -dir;
然後定義主要的運動函式

1             obj.timer = setinterval(function


();8 obj.style[attr] = speed + 'px';


9if(speed ==target);


13 },20);
speed = 元素屬性當前的值 + 要每段時間的變化，判斷改變後的值speed是否大於或者小於目標值target，如果大於或者小於目標值，則speed等於目標值，否則繼續執行。

如果speed等於目標值則停止對元素屬性的更改，清楚定時器，如果有**函式則執行。

最後定義對透明度改變的函式：

1


function


chopacity(obj,speed,target,endfn)


22if(obj.style.opacity > 1)


27 },40);


2829 }
基本思想和domove（）函式差不多。這裡就不在講了。

應用：

實現這個動畫效果的**：
domove函式

1


function


domove(obj,attr,dir,target,endfn);


14 obj.style[attr] = speed + 'px';


15if(speed ==target);


19 },20);


20};


2122


function


chopacity(obj,speed,target,endfn)


43if(obj.style.opacity > 1)


48 },40);


4950}51


52function


getstyle(obj,attr);

js運動框架

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

彈性運動框架

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

完美運動框架

1.勻速運動 1 2 param obj 待改變的物件 3 param json 待改變的屬性列表 4 return func 鏈式呼叫 5 6 functionstartmove obj,json,func else 25 26 勻速運動 27 var ispeed 10 28 29 if icu...