多物体运动

<!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;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var li = document.getElementsByTagName('li');
			for(var i=0;i<li.length;i++){
				li[i].timer=null;
				li[i].onmouseover = function(){
					startMove(this,400);
				}
				li[i].onmouseout = function(){
					startMove(this,200);
				}
			}
		}
		function startMove(obj,target){
			clearInterval(obj.timer);
		obj.timer=setInterval(function(){
				var speed  = (target-obj.offsetWidth)/8;//增加缓冲运动
				speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil向上取整,floor向下取整
				if(obj.offsetWidth == target){
					clearInterval(obj.timer);
				}else{
					obj.style.width=obj.offsetWidth + speed+'px';
				}
			},30);
		}
	</script>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

多物体运动需要对执行函数多加一个参数-对象obj。给每一个要触发的元素都设置一个定时器，或者初始值（例如透明度的alpha）,这样互不干扰

关于透明度的小知识点： filter: alpha(opacity:30); /*滤镜，ie用谷歌没用*/ 功能十分强大，此处语义为不透明度30%，范围0-100
opacity:0.3; /*不透明度，谷歌用，不支持ie*/ 范围0-1

猜你喜欢