給屬性賦值:(既能獲取又能賦值)html
1)div.style.width jquery
單個賦值:點語法,這個方法比較固定,不能用變量或者字符串的形式更換屬性,不方便咱們傳值獲取屬性,和給屬性賦值。ajax
2)div.style[「width」] json
變量賦值:中括號形式,傳入字符串。能夠經過傳字符串或者變量的方式獲取和賦值屬性。缺點:只能是對行內式CSS來操做的。賦值的時候毫無問題。可是,獲取值的時候有問題了。框架
工做中咱們常常須要獲取一個盒子的最終樣式,好比,要獲取未加定位的盒子的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 }
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 }
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 }
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 }
首先弄清楚什麼是回調函數,回調函數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 }
需求:鼠標放入到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>
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>