給屬性賦值：（既能獲取又能賦值）
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...