（43）JS运动之链式运动框架

Posted 2020-09-23 jzssuanfa

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（43）JS运动之链式运动框架相关的知识，希望对你有一定的参考价值。

链式运动框架就是一系列的运动分阶段进行，在普通的运动框架上加上一个參数function，这个function表示下一个要运行的动作。详细代码例如以下：

<!DOCTYPE html>
<!--链式运动框架：运动分阶段进行，当运动停止的时候。运行下一个运动-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3}
</style>
 

<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');//先获取div元素
	oDiv.onmouseover=function ()
	{
		startMove(oDiv,'width',300,function(){//先是宽变300
			startMove(oDiv,'height',300,function(){//当宽变300的时候，即运动结束时候开启还有一个运动，使其高变为300
				startMove(oDiv,'opacity',100);//使透明度变成100，原来是30

			});
		
		});
	};
	oDiv.onmouseout=function ()//当鼠标移出的时候，跟移进的时候效果相反就可以。

	{
		startMove(oDiv,'opacity',30,function(){
			startMove(oDiv,'height',100,function(){
				startMove(oDiv,'width',100);
			});
		
		});
	};

};//下面是运动框架的内容
function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

function startMove(obj, attr, iTarget, fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要运行的运动
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var cur=0;
		
		if(attr=='opacity')
		{
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget)
		{
			clearInterval(obj.timer);
			
			if(fnEnd)fnEnd();
		}
		else
		{
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
	}, 30);
}

</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

效果图：

当鼠标移进的时候，先横向变宽，再纵向变高。最后透明度变成100，效果例如以下：

技术分享