JS特效@緩動框架封裝及應用

時間 2019-11-24

標籤特效緩動框架封裝應用欄目 JavaScript 简体版

原文原文鏈接

| 版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

1、變量CSS樣式屬性獲取/賦值方法

給屬性賦值：（既能獲取又能賦值）html

1）div.style.width jquery

單個賦值：點語法，這個方法比較固定，不能用變量或者字符串的形式更換屬性，不方便咱們傳值獲取屬性，和給屬性賦值。ajax

2）div.style[「width」] json

變量賦值：中括號形式，傳入字符串。能夠經過傳字符串或者變量的方式獲取和賦值屬性。缺點：只能是對行內式CSS來操做的。賦值的時候毫無問題。可是，獲取值的時候有問題了。框架

2、封裝獲取樣式屬性值的兼容方法

工做中咱們常常須要獲取一個盒子的最終樣式，好比，要獲取未加定位的盒子的left屬性值，那麼如何到計算後的樣式屬性值呢：異步

1）w3c：window.getComputedStyle(元素,僞元素)["left"]函數

第二個參數是僞元素，咱們傳入null便可動畫

2）IE：div.currentStyle.left或 div.current["left"]this

//兼容方法獲取元素樣式（ele爲元素，attr爲屬性）url

1 //兼容方法獲取元素樣式（ele爲元素，attr爲屬性）
2 function getStyle(ele,attr){
3   if(window.getComputedStyle){
4      return window.getComputedStyle(ele,null)[attr];
5    }
6      return ele.currentStyle[attr];
7                      }

3、封裝緩動框架（單個數值屬性）

 1 //參數變爲3個，封裝可以讓任意對象的指定屬性變到指定值的動畫函數
 2 function animate(ele,attr,target){
 3             //先清定時器
 4             clearInterval(ele.timer);
 5             ele.timer = setInterval(function () {
 6             var leader = parseInt(getStyle(ele,attr)) || 0;  //獲取任意樣式屬性。
 7                 //1.獲取步長
 8                 var step = (target - leader)/10;
 9                 //2.二次加工步長
10                 step = step>0?Math.ceil(step):Math.floor(step);
11                 leader = leader + step;
12                 //ele.style.left=leader+"px";
13                 //原來的方式只能設置left
14                 //3.賦值，能夠設置任意屬性
15                 ele.style[attr] = leader + "px";
16                  //4.清除定時器
17                 if(Math.abs(target-leader)<=Math.abs(step)){
18                     ele.style[attr] = target + "px";
19                     clearInterval(ele.timer);
20                 }
21 
22             },25);
23         }
24 
25  //兼容方法獲取元素樣式  
26 function getStyle(ele,attr){
27             if(window.getComputedStyle){
28                 return window.getComputedStyle(ele,null)[attr];
29             }
30             return ele.currentStyle[attr];
31         }

4、封裝緩動框架（多個數值屬性）

 1 btnArr[0].onclick = function () {
 2             //以對象鍵值對的形式傳參
 3             var json = {"left":10,"top":200,"width":300,"height":200};
 4             animate(div,json);
 5         }
 6 
 7 function animate(ele,json){ 
 8             //json{屬性名：屬性值}{attr:target}
 9             //先清定時器
10             clearInterval(ele.timer);
11             ele.timer = setInterval(function () {
12                 //遍歷屬性和值，分別單獨處理json
13                 //attr == k(鍵)    target == json[k](值)
14                 for(var k in json){
15                     var leader = parseInt(getStyle(ele,k)) || 0;
16                     //1.獲取步長
17                     var step = (json[k] - leader)/10;
18                     //2.二次加工步長
19                     step = step>0?Math.ceil(step):Math.floor(step);
20                     leader = leader + step;
21                     //3.賦值
22                     ele.style[k] = leader + "px";
23                 
24                 }
25             },25);
26         }
27 
28 //兼容方法獲取元素樣式
29 function getStyle(ele,attr){
30             if(window.getComputedStyle){
31                 return window.getComputedStyle(ele,null)[attr];
32             }
33             return ele.currentStyle[attr];
34         }

5、封裝緩動框架（清除定時器）

 1 btnArr[0].onclick = function () {
 2             var json = {"left":10,"top":200,"width":300,"height":200};
 3             animate(div,json);
 4         }
 5 
 6 function animate(ele,json){
 7             //先清定時器
 8             clearInterval(ele.timer);
 9             ele.timer = setInterval(function () {
10                 //開閉原則
11                 var bool = true;
12 
13                 //遍歷屬性和值，分別單獨處理json
14                 //attr == k(鍵)    target == json[k](值)
15                 for(var k in json){
16                     //四步
17                     var leader = parseInt(getStyle(ele,k)) || 0;
18                     //1.獲取步長
19                     var step = (json[k] - leader)/10;
20                     //2.二次加工步長
21                     step = step>0?Math.ceil(step):Math.floor(step);
22                     leader = leader + step;
23                     //3.賦值
24                     ele.style[k] = leader + "px";
25                    //4.清除定時器
26      //判斷: 目標值和當前值的差大於步長，就不能跳出循環
27      //不考慮小數的狀況：目標位置和當前位置不相等，就不能清除清除定時器。
28                     if(json[k] !== leader){//當前這個屬性尚未達到目標值
29                         bool = false;
30                     }
31                 }
32 
33               //只有全部的屬性都到了指定位置，bool值纔不會變成false；
34                 if(bool){//若是此時仍然是true說明全部的都到目標了
35                     clearInterval(ele.timer);
36                 }
37             },25);
38         }
39 
40 
41 
42 
43  //兼容方法獲取元素樣式
44  function getStyle(ele,attr){
45             if(window.getComputedStyle){
46                 return window.getComputedStyle(ele,null)[attr];
47             }
48             return ele.currentStyle[attr];
49         }

6、封裝緩動框架（添加回調函數）

首先弄清楚什麼是回調函數，回調函數B就是一個參數，將這個函數做爲參數傳到主函數A裏面，當主函數A執行完以後，再執行傳進去的這個函數B。這個過程就叫作回調。回調，就是回頭調用的意思。主函數的事先幹完，回頭再調用傳進來的那個函數。

1）回調函數怎麼起做用？
把我要執行的這個任務寫成一個函數，將這個函數和某一時間或者事件或者中斷創建關聯。當這個關聯完成的時候，這個函數華麗的從普通函數變身成爲回調函數。

2）回調函數何時執行？
當該回調函數關心的那個時間或者事件或者中斷觸發的時候，回調函數將被執行。
通常是觸發這個時間、事件或中斷的程序主體（一般是個函數或者對象）觀察到有一個關注這個東東的回調函數的時候，這個主體負責調用這個回調函數。

3）回調函數有什麼好處？
最大的好處是你的程序變成異步了。也就是你沒必要再調用這個函數的時候一直等待這個時間的到達、事件的發生或中斷的發生（萬一一直不發生，你的程序會怎麼樣？）。再此期間你能夠作作別的事情，或者四處逛逛。當回調函數被執行時，你的程序從新獲得執行的機會，此時你能夠繼續作必要的事情了。

4）回調函數的例子

約會結束後你送你女友回家，離別時，你確定會說：「到家了給我發條信息，我很擔憂你。」對不，而後你女友回家之後還真給你發了條信息。小夥子，你有戲了。其實這就是一個回調的過程。你留了個參數函數（要求女友給你發條信息）給你女友，而後你女友回家，回家的動做是主函數。她必須先回到家之後，主函數執行完了，再執行傳進去的函數，而後你就收到一條信息了。

 1 簡單案例代碼：
 2 //定義主函數，回調函數做爲參數
 3 function A(callback) {
 4     callback();  
 5     console.log('我是主函數');      
 6 }
 7 //定義回調函數
 8 function B(){
 9     setTimeout("console.log('我是回調函數')", 3000);//模仿耗時操做  }
10 //調用主函數，將函數B傳進去
11 A(B);
12 
13 //輸出結果
14 我是主函數
15 我是回調函數

上面的代碼中，咱們先定義了主函數和回調函數，而後再去調用主函數，將回調函數傳進去。

定義主函數的時候，咱們讓代碼先去執行callback()回調函數，但輸出結果倒是後輸出回調函數的內容。這就說明了主函數不用等待回調函數執行完，能夠接着執行本身的代碼。因此通常回調函數都用在耗時操做上面。好比ajax請求，好比處理文件等。

介紹完回調函數後，咱們回到封裝緩動框架這個問題上，假如我想讓某個盒子運動出去後再運動回來，運用傳統的思路寫兩個函數並列，後面的函數會覆蓋前面的函數。那麼咱們就須要用到回調函數。咱們先讓盒子運動出去（主函數，這個函數加入了回調函數這個參數），當運動出去後，讓它運動回來（執行回調函數）。

 1 btnArr[0].onclick = function () {
 2             var json1 = {"left":300,"top":200,"width":300,"height":200};
 3             var json2 = {"left":10,"top":30,"width":100,"height":100};
 4             //回調函數放在主函數裏面
 5             animate(div,json1, function () {
 6                 animate(div,json2, function () {
 7                     animate(div,json1);
 8                 });
 9             });
10      
11         }
12 
13 function animate(ele,json,fn){
14             //先清定時器
15             clearInterval(ele.timer);
16             ele.timer = setInterval(function () {
17            //開閉原則，假設這一次執行完成後，全部的屬性都能達到目標值
18                 var bool = true;
19 
20 
21                 //遍歷屬性和值，分別單獨處理json
22                 //attr == k(鍵)    target == json[k](值)
23                 for(var k in json){
24                     //四步
25                     var leader = parseInt(getStyle(ele,k)) || 0;
26                     //1.獲取步長
27                     var step = (json[k] - leader)/10;
28                     //2.二次加工步長
29                     step = step>0?Math.ceil(step):Math.floor(step);
30                     leader = leader + step;
31                     //3.賦值
32                     ele.style[k] = leader + "px";
33                     //4.清除定時器
34       //判斷: 目標值和當前值的差大於步長，就不能跳出循環
35     //不考慮小數的狀況：目標位置和當前位置不相等，就不能清除清除定時器。
36                     if(json[k] !== leader){//當前這個屬性尚未達到目標值
37                         bool = false;
38                     }
39                 }
40           //只有全部的屬性都到了指定位置，bool值纔不會變成false；
41                 if(bool){//若是此時仍然是true說明全部的都到目標了
42                     clearInterval(ele.timer);
43       //全部程序執行完畢了，如今能夠執行回調函數了
44     //只有傳遞了回調函數，才能執行，就是說若是fn存在，就執行fn這個方法；
45                     if(fn){
46                         fn();
47                     }
48                 }//動畫完成以後執行
49             },25);
50         }
51 
52 
53  //兼容方法獲取元素樣式
54  function getStyle(ele,attr){
55             if(window.getComputedStyle){
56                 return window.getComputedStyle(ele,null)[attr];
57             }
58             return ele.currentStyle[attr];
59         }

7、封裝緩動框架（手風琴案例）

需求：鼠標放入到li中該盒子變寬，其餘的盒子變窄。移開大盒子，回覆原樣。

 1 <script src="../01.js"></script>
 2     <script>
 3         window.onload = function () {
 4             //步驟：
 5       //1.給li添加背景
 6       //2.綁定onmouseover事件，鼠標放入到li中該盒子變寬，其餘的盒子變窄
 7       //3.移開大盒子，回覆原樣
 8 
 9             var div = document.getElementsByTagName("div")[0];
10             var liArr = div.getElementsByTagName("li");
11             //1.給li添加背景
12             for(var i=0;i<liArr.length;i++){
13                 liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
14 
15     //2.綁定onmouseover事件，鼠標放入到li中該盒子變寬，其餘的盒子變窄
16                 liArr[i].onmouseover = function () {
17                     //排他思想
18                     for(var j=0;j<liArr.length;j++){
19                         //引用框架實現寬度變窄
20                         animate(liArr[j],{"width":100});
21                     }
22                     //剩下他本身
23                        animate(this,{"width":800})
24                 }
25             }
26 
27             //3.移開大盒子，回覆原樣
28             div.onmouseout = function () {
29                 for(var j=0;j<liArr.length;j++){
30                     //引用框架實現寬度變窄
31                     animate(liArr[j],{"width":240});
32                 }
33             }
34         }
35     </script>

8、封裝緩動框架（關閉360動畫特效）

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .box{
 8             width: 322px;
 9             position: fixed;
10             bottom:0;
11             right:0;
12         }
13         span{
14             position: absolute;
15             top:0;
16             right:0;
17             width:30px;
18             height: 20px;
19             cursor: pointer;
20         }
21     </style>
22     <script src="../jquery1.0.0.1.js"></script>
23     <script>
24         window.onload = function () {
25             //需求：下面的盒子高度變爲0，而後大盒子的寬在變爲0.
26             var guanbi = document.getElementById("guanbi");
27             var box = guanbi.parentNode;
28             var b = document.getElementById("b");
29 
30             guanbi.onclick = function () {
31                 //下面的盒子高度變爲0，而後大盒子的寬在變爲0.
32                 animate(b,{"height":0}, function () {
33                     animate(box,{"width":0});
34                 });
35             }
36         }
37     </script>
38 </head>
39 <body>
40     <div class="box">
41         <span id="guanbi"></span>
42         <div class="hd" id="t">
43             <img src="images/t.jpg" alt=""/>
44         </div>
45         <div class="bd" id="b">
46             <img src="images/b.jpg" alt=""/>
47         </div>
48     </div>
49 </body>
50 </html>