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)
				
			}