給屬性賦值:(既能獲取又能賦值)
1)div.style.width
單個賦值:
點語法,
這個方法比較固定,不能用變數或者字串的形式更換屬性,不方便我們傳值獲取屬性,和給屬性賦值。2)
div.style[
「width
」]
變數賦值:中括號形式,傳入字串。可以通過傳字串或者變數的方式獲取和賦值屬性。缺點:
只能是對行內式css來操作的
。賦值的時候毫無問題。但是,獲取值的時候有問題了。
工作中我們經常需要獲取乙個盒子的最終樣式,比如
,要獲取未加定位的盒子的left屬性值
,那麼如何到計算後的樣式屬性值呢:
1)w3c:window.getcomputedstyle(元素
,偽元素
)["left"]
第二個引數是偽元素,我們傳入null即可
2)ie:div.currentstyle.left或
div.current["left"]
//相容方法獲取元素樣式
(ele為元素,
attr
為屬性)
1//相容方法獲取元素樣式(ele為元素,attr為屬性)
2function
getstyle(ele,attr)
6return
ele.currentstyle[attr];
7 }
1//引數變為3個,封裝能夠讓任意物件的指定屬性變到指定值的動畫函式
2function
animate(ele,attr,target)
2122 },25);23}
2425
//相容方法獲取元素樣式
26function
getstyle(ele,attr)
30return
ele.currentstyle[attr];
31 }
1 btnarr[0].onclick = function() ;
4animate(div,json);5}
67function
animate(ele,json)9//
先清定時器
10clearinterval(ele.timer);
11 ele.timer = setinterval(function
() 25 },25);26}
2728
//相容方法獲取元素樣式
29function
getstyle(ele,attr)
33return
ele.currentstyle[attr];
34 }
1 btnarr[0].onclick = function首先弄清楚什麼是**函式,**函式b就是乙個引數,將這個函式作為引數傳到主函式() ;
3animate(div,json);4}
56function
animate(ele,json)31}
3233
//只有所有的屬性都到了指定位置,bool值才不會變成false;
34if(bool)
37 },25);38}
3940
4142
43//
相容方法獲取元素樣式
44function
getstyle(ele,attr)
48return
ele.currentstyle[attr];
49 }
a裡面,當主函式
a執行完之後,再執行傳進去的這個函式
b。這個過程就叫做**。**,就是回頭呼叫的意思。主函式的事先幹完,回頭再呼叫傳進來的那個函式。
1)**函式怎麼起作用?
把我要執行的這個任務寫成乙個函式,將這個函式和某一時間或者事件或者中斷建立關聯。當這個關聯完成的時候,這個函式華麗的從普通函式變身成為**函式。
2)**函式什麼時候執行?
當該**函式關心的那個時間或者事件或者中斷觸發的時候,**函式將被執行。
一般是觸發這個時間、事件或中斷的程式主體(通常是個函式或者物件)觀察到有乙個關注這個東東的**函式的時候,這個主體負責呼叫這個**函式。
3)**函式有什麼好處?
最大的好處是你的程式變成非同步了。也就是你不必再呼叫這個函式的時候一直等待這個時間的到達、事件的發生或中斷的發生(萬一一直不發生,你的程式會怎麼樣?)。再此期間你可以做做別的事情,或者四處逛逛。當**函式被執行時,你的程式重新得到執行的機會,此時你可以繼續做必要的事情了。
4)**函式的例子
約會結束後你送你女朋友回家,離別時,你肯定會說:「到家了給我發條資訊,我很擔心你。
」 對不,然後你女朋友回家以後還真給你發了條資訊。小夥子,你有戲了。其實這就是乙個**的過程。你留了個引數函式(要求女朋友給你發條資訊)給你女朋友, 然後你女朋友回家,回家的動作是主函式。她必須先回到家以後,主函式執行完了,再執行傳進去的函式,然後你就收到一條資訊了。
1上面的**中,我們先定義了主函式和**函式,然後再去呼叫主函式,將**函式傳進去。簡單案例**:2//
定義主函式,**函式作為引數
3function
a(callback) 7//
定義**函式
8function
b()10
//呼叫主函式,將函式b傳進去
11a(b);
1213
//輸出結果
14我是主函式
15 我是**函式
定義主函式的時候,我們讓**先去執行callback()**函式,但輸出結果卻是後輸出**函式的內容。這就說明了主函式不用等待**函式執行完,可以接著執行自己的**。所以一般**函式都用在耗時操作上面。比如
ajax
請求,比如處理檔案等。
介紹完**函式後,我們回到封裝緩動框架這個問題上,假如我想讓某個盒子運動出去後再運動回來,運用傳統的思路寫兩個函式並列,後面的函式會覆蓋前面的函式。那麼我們就需要用到**函式。我們先讓盒子運動出去(主函式,這個函式加入了**函式這個引數),當運動出去後,讓它運動回來(執行**函式)。
1 btnarr[0].onclick = function需求:滑鼠放入到li中該盒子變寬,其他的盒子變窄。移開大盒子,回覆原樣。() ;
3var json2 = ;4//
**函式放在主函式裡面
5 animate(div,json1, function
() );
9});
1011}12
13function
animate(ele,json,fn)39}
40//
只有所有的屬性都到了指定位置,bool值才不會變成false;
41if(bool)
48 }//
動畫完成之後執行
49 },25);50}
5152
53//
相容方法獲取元素樣式
54function
getstyle(ele,attr)
58return
ele.currentstyle[attr];
59 }
封裝緩動框架
function animate obj,json,fn else var step target leader 10 step step 0?math.ceil step math.floor step leader leader step 我們要給傳遞過來的屬性賦值 if k opacity e...
緩動原理及應用(動畫程式設計深入
也許我們學了很久也學了很多東西,但是不看這方面的知識,還真不知道什麼叫緩動。要講概念是很簡單的,關鍵是你能否運用得上,並恰如其分的讓它在適當的應用出現,這才是 難點。廢話少說,下面開講 緩動就是這樣一種運動,我還是先不講概念,先看幾種情況的,比如如果有心人也許會看到有人做過滑鼠跟隨,當滑鼠移動的時候...
js緩動演算法以及應用場景 vue
store mapcontainer.js state largepassengerflow null,大客流的定時器 largepassengerdata 大客流的定時器 動態 10假資料 largepassengerslowdata 大客流緩動5 5s後的資料 largepassengerslo...