js動畫（四）

終於到了最後了，這裡要告一段落了，整了個js運動框架，咳咳咳，好冷 啊啊啊啊啊啊，這天氣。媽的，工資怎麼也不發，啊，說好的

人與人之間的信任呢？哎，氣誒，不到150字啊，又是這個梗。。怎麼辦？說些什麼呢？哦，就是今天在嘗試做那個，曲面陰影和翹邊

陰影的時候，碰到一個問題，就是a:after這個層，想讓他到a 層下麵，因為a:after層把a層擋住了，搞了，眼睛都快找瞎了，哎，程式

員短命是有道理的。最後，的結果是，還是沒找出來。回頭要好好的去研究研究z-index這個屬性，哪位道友願意助一臂之力的請留言

，共同進步，共創美好未來。糾結誒，要不要放上來呢？糾結。。。。

這樣150 總夠了吧。。。。。

js動畫同時運動

代碼如下：

<script>
			window.onload = function() {
				var qwe = document.getElementById("sd");
			    qwe.timer = null;
			    var opacity = 30;
				qwe.onmouseover = function() {
					onStart(qwe,{"height":300,"width":400,"opacity":100},5);/*{}括起來的，是用到json，就是obj={a:11,b:12}for（var i in obj）這裡的i遍歷a,bobj[i],就是所對應的值，,可以去搜一下。*/
				}
				qwe.onmouseout = function() {
					onStart(qwe,{"height":100,"width":200,"opacity":30},-5);
				}
			}

			function getStyle(obj, attr) { /*obj對象，就是你要搞哪個元素，attr屬性，你要搞哪個的屬性*/
				if(obj.currentStyle) {
					return obj.currentStyle[attr]; /*.currentStyle針對IE*/
				} else {
					return getComputedStyle(obj, false)[attr]; /* getComputedStyle針對firebox瀏覽器*/
				}
			}/*js動畫（三）講過，直接拿來用就可以了*/

			function onStart(obj, json, speed,fn) {
					clearInterval(obj.timer);/*清除定時器*/
					obj.timer = setInterval(function(){ /&定時器實例&/
						for(var attr in json){ /*這裡就是json for in遍歷嘛，就是能同時進行運動的關鍵*/

		  				    if(attr == "opacity"){
								var lo = parseInt(getStyle(obj,attr)*100);

								/*變速，這裡為什麼會多減1多加1，你打開調試工具，然後看著的那個數值，和你的目標值對比，你就知道了，可能還要改其他數字*/
								speed = (json[attr]-lo)/10;
								speed=speed>0?Math.ceil(speed+1):Math.floor(speed);
								
								}
		  				    else{
		  				    	        var lo = parseInt(getStyle(obj,attr));
		  				    	        /*變速*/
		  				    	        speed = (json[attr]-lo)/8;
								speed=speed>0?Math.ceil(speed+2):Math.floor(speed-1);
		  				    }
							if(lo == json[attr]){
								clearInterval(obj.timer);
								if(fn){
									fn();/*回調函數，是什麼東東呢？他可以繼續執行這個函數的關鍵，也就是，鏈式運動的關鍵*/
								}
							}
							else{
								if(attr == "opacity")
								{
									lo = (lo+speed)/100;

									obj.style[attr] = lo;/*這個又是什麼呢？其實就是這樣了，obj.style.attr=lo,懂了吧！這樣寫，我是為了，整合width,height,等差不多格式的*/
								}
								
								obj.style[attr] = lo+speed+"px";/*跟上面一樣，寫不下了，寫這裡，為了上次js動畫（三）提出的整合width和height，不信你去看js動畫（三），那樣很煩*/
							}
						}
					},30)
				
			}