js動畫（三）

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

行駛在冷風路上麽，北風那個吹啊吹啊吹啊，好了，發神經發完了，接下來進入正題，嚴肅臉。（字數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解決。