链式运动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		ul,li{
			margin:0;
			padding:0;
		}
		ul,li{
			list-style: none;
		}
		ul li{
			width: 200px;
			height: 100px;
			background:yellow;
			margin-bottom: 20px;
			filter:alpha(opacity:30);
			opacity: 0.3;
			border:4px solid #000;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var li1 = document.getElementById('li1');
			li1.onmouseover = function(){
				startMove(li1,'width',400,function(){
					startMove(li1,'height',200,function(){
						startMove(li1,'opacity',100)
					})
				});
			}
			li1.onmouseout = function(){
				startMove(li1,'opacity',30,function(){
					startMove(li1,'height',100,function(){
						startMove(li1,'width',200)
					})
				});
			}
		}
		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		function startMove(obj,attr,target,fn){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var icur=0;
				if(attr == 'opacity'){
					var icur = parseFloat(getStyle(obj, attr))*100;
				}else{
					var icur = parseInt(getStyle(obj, attr));
				}
				var speed  = (target-icur)/8;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(icur == target){
					clearInterval(obj.timer);
					if(fn){
						fn();
					}
				}else{
					if(attr == 'opacity'){
						obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
						obj.style.opacity=(icur+speed)/100;
					}else{
						obj.style[attr]=icur + speed+'px';
					}
				}
			},30);
		}
	</script>
</head>
<body>
	<ul>
		<li id="li1"></li>
		
	</ul>
</body>
</html>

顾名思义，按着顺序进行运动。添加一个函数参数，为下一步所要进行的运动。后面添加一个判定，若有参数传入则执行。注意onmouseout的运动顺序（与onmouseover相反）。另此处this问题，若obj的参数为this，则从第二个开始无效。

猜你喜欢