Js动画-链式动画（七）

链式动画--一环扣一环的运动

一：js基本代码

    var alpha=30;    //开始是透明度为0.3
 	function startMove(obj,attr,target)    //传入参数Obj、要改变的属性、目标、下一个函数
 	{
 		clearInterval(obj.timer);    //清空该Obj的计时器
 		var speed=0;
 		obj.timer=setInterval   
 		(
 			function()
 			{
                //改变属性
                //当形参为透明度时单独处理
                if(attr=="opacity")
                {
                	var now_attr=parseFloat(getStyle(obj,attr));
                	speed=(target-now_attr)>0?0.1:-0.1;
                }
                else
                {
                    //获取速度做缓冲运动
                	var now_attr=parseInt(getStyle(obj,attr));
                	speed=(target-now_attr)/8;
     				speed=speed>0?Math.ceil(speed):Math.floor(speed);
                }
 				if(now_attr==target)
 				{
 					clearInterval(obj.timer);
                    if(fn)fn();    //当清空计数器时执行链式运动的下一个函数
 				}
 				else
 				{
 					if(attr=="opacity")
 					{
                        //改变透明度
 						obj.style[attr]=parseFloat(getStyle(obj,attr))+speed;
 					}
 					else
 					{
                        //改变基本属性
 						obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";
 					}
 				}
 			},30	
 		)
 	}
    //获取属性，不包括boder等边界，更加方便，可移植性高
 	function getStyle(obj,attr)
 	{
 		if(obj.currentStyle)	//IE浏览器执行
 		{
 			return obj.currentStyle[attr];
 		}
 		else    //谷歌浏览器
 		{
 			return getComputedStyle(obj,false)[attr];
 		}
 	}

二：链式调用

	//每次都会在最后执行下一个函数
    Div.onmouseover=function(){
 	 		startMove(Div,"width",400,function(){
 	 			startMove(Div,"height",400,function(){
 	 				startMove(Div,"opacity",1,function(){
	 				});
	 			});
 	 		});
 	 	}

记录:

• 可以直接把函数作为形参传进去
• 这种方法对getElementsByTagName取得多个值无效