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

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

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

給屬性賦值:(既能獲取又能賦值)html

1div.style.width    jquery

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

2div.style[width]    json

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

 

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

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

1)w3cwindow.getComputedStyle(元素,僞元素)["left"]函數

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

2IEdiv.currentStyle.leftdiv.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>
相關文章
相關標籤/搜索