Js动画-同时运动（八）

一:了解json

• var json={a:12,b:13,name:value} 

     调用json:   

   for(var i in json)

       {

         alert(i);//弹出那么

         alert(h=json[i]);

       }

二：代码

//优化后的代码
//var timer=null;
 	//startMove(obj,{attr1:target1,attr2:target2},fn)
 	function startMove(obj,json,fn)    //传入参数Obj、要改变的属性、目标
 	{
 		clearInterval(obj.timer);    //清空该Obj的计时器
 		var speed=0;
 		obj.timer=setInterval   
 		(
 			function()
 			{
                var flag=true;	//定义flag假设运动到达最终值
 				for(var attr in json)
 	 			{
 					//改变属性
 	                if(attr=="opacity")
 	                {
 	                	var now_attr=parseFloat(getStyle(obj,attr));
 	                	speed=(json[attr]-now_attr)>0?0.1:-0.1;
 	                }
 	                else
 	                {
 	                	var now_attr=parseInt(getStyle(obj,attr));
 	                	speed=(json[attr]-now_attr)/8;
 	     				speed=speed>0?Math.ceil(speed):Math.floor(speed);
 	                }
 	 				if(now_attr!=json[attr])
 	 				{
 	 					flag=false;    //如果任意一个值没达到，就设为false
 	 				}
 	 				if(attr=="opacity")
 	 				{
 	 					obj.style[attr]=parseFloat(getStyle(obj,attr))+speed;
 	 				}
 	 				else
 	 				{
 	 					obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";
 	 				}
 	 			}
                if(flag)
                {
                    clearInterval(obj.timer);
 	 				if(fn){fn();}
                }
 			},30	
 		)
 	}

        //使用json调用函数实现同时运动
        Div.onmouseover=function(){
 	 		startMove(Div,{"width":400,"height":400});
 	 	}