码迷,mamicode.com
首页 > Web开发 > 详细

(43)JS运动之链式运动框架

时间:2017-06-18 13:29:12      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:time   article   snippet   clear   seo   cti   title   math   turn   

链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数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,效果例如以下:

技术分享

技术分享

技术分享

技术分享

当鼠标移出的时候。效果刚好和上面相反:

技术分享

技术分享

技术分享

技术分享





(43)JS运动之链式运动框架

标签:time   article   snippet   clear   seo   cti   title   math   turn   

原文地址:http://www.cnblogs.com/jzssuanfa/p/7043872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!