js运动中级

===========================================================================

完美运动框架：
看注释帮助理解

startMove(obj, json, fnEnd(){ } )

function getStyle(obj, name)
{
	if(obj.currentStyle)//做IE兼容
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}


//startMove(oDiv, {width: 400, height: 400})


function startMove(obj, json, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var bStop=true;		//假设：所有值都已经到了
		
		for(var attr in json)//遍历json里面的元素
		{
			var cur=0;
			
			if(attr=='opacity')
			{
				cur=Math.round(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj, attr));
			}
			
			var speed=(json[attr]-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			if(cur!=json[attr])//当还有当前值未到达预设值时做标记为假
				bStop=false;
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
		if(bStop)//当标记为真时则关闭定时器而且执行函数
		{
			clearInterval(obj.timer);
						
			if(fnEnd)fnEnd();
		}
	}, 30);
}

===========================================================================

广告幻灯片切换：

window.onload=function ()
{
	var oDiv=document.getElementById('play');
	var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	
	var now=0;
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			now=this.index;
			
			tab();
		};
	}
	
	function tab()//按钮切换联动大图切换
	{
		for(var i=0;i<aBtn.length;i++)
		{
			aBtn[i].className='';
		}
		aBtn[now].className='active';
		startMove(oUl, {top: -150*now});//联动大图150px是每张图片的height
	}
	
	function next()//每次切换图片的过程，加上切换到尽头复原
	{
		now++;
		if(now==aBtn.length)
		{
			now=0;
		}
		
		tab();
	}
	
	var timer=setInterval(next, 2000);
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(next, 2000);//用定时器自动轮播
	};
};
</script>
</head>