js動畫（三）

標籤：http   color   interval   getc   鏈式   images   針對   元素   nload   

咳咳咳咳，感冒了感冒了，鼻塞，藍瘦啊！嘴巴也開裂，哎，心疼自己。想到這是第三隻唇膏了！只怪，放蕩不倔愛自由，

行駛在冷風路上麼，北風那個吹啊吹啊吹啊，好了，發神經發完了，接下來進入正題，嚴肅臉。（字數150應該湊夠了。）

js鏈式運動

 

代碼如下 ：

<style>#lia {width: 200px;height: 100px;background: red;opacity: 0.3;}</style><script>window.onload = function() {var qwe = document.getElementById("lia");qwe.timer = null;qwe.opacity=30;
                        /*以下，就是控制碼*/qwe.onmouseover = function() {onStart(qwe,"width",400,10,function(){/*這裡控制，寬，目標值，速度，以及下一個動畫*/onStart(qwe,"height",300,10,function(){/*這裡控制，長，目標值，速度，以及下一個動畫*/
                                               onStart(qwe,"opacity",100,10);/*這裡控制，透明度，目標值，速度，以及下一個動畫，當然以上順序可以換*/

                                                                }); 
                                                    });
                         }

qwe.onmouseout = function() {/*這裡不解釋，跟上面一樣*/onStart(qwe,"opacity",30,-10,function(){onStart(qwe,"height",100,-10,function(){onStart(qwe,"width",200,-10);});});}}function getStyle(obj, attr) { /*obj對象，就是你要搞哪個元素，attr屬性，你要搞哪個的屬性*/if(obj.currentStyle) {return obj.currentStyle[attr]; /*.currentStyle針對IE*/} else {return getComputedStyle(obj,false)[attr]; /* getComputedStyle針對firebox瀏覽器*/}}
                /*這個呢，是昨天的彩蛋，挺好用的，具體的功能就是，取對象的樣式屬性值，很好用*/function onStart(obj,attr, mu,speed,fn) {clearInterval(obj.timer);obj.timer = setInterval(function() {if(parseInt(getStyle(obj,"width")) == mu){if(fn){fn()   /*這裡就是，關鍵，就是執行下一個，函數的功能，我在這裡建立一個空函數，
 具體函數內容交給主函數來寫，所以這個函數，再多傳一個參數，來判斷，
 是否需要執行下一個函數*/}else{clearInterval(obj.timer);}}else if(parseInt(getStyle(obj,"height")) == mu){if(fn){fn()}else{clearInterval(obj.timer);}}else if(obj.opacity == mu){     clearInterval(obj.timer);     if(fn){     fn();     }}else{if(attr == "opacity"){obj.opacity+=speed;obj.style.opacity = obj.opacity/100;}else if(attr == "width"){obj.style.width = parseInt(getStyle(obj,"width"))+speed+"px";}else if(attr == "height"){obj.style.height = parseInt(getStyle(obj,"height"))+speed+"px";}
                                /*這裡就是把三個功能給他合成在一個函數裡，所以上述的fn(),執行的函數還是本身，只不過選擇不同功能罷了 
                                 
                                  這裡其實還可以最佳化，前面提到getStyle()，可以取到，對象的樣式屬性值，所以，可以把height和width整合起來。
                                */}}, 30)}</script>

今天為什麼把css的代碼也放上來呢？

 

 

 

 

 

 

 

 

 

 

 

只是手誤而已，嘿嘿嘿。若嘗試有問題，對比css解決。

js動畫（三）