多物体运动

最新推荐文章于 2024-09-22 10:46:41 发布

muzi187

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量265

点赞数

文章标签： html js 运动

本文链接：https://blog.csdn.net/muzi187/article/details/71514902

版权

1、多物体宽度改变

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画</title>
<style>
body{
	margin:0;
	padding:0;
}
ul,li{
	list-style:none;
}
ul li{
	width:200px;
	height:100px;
	background:yellow;
	margin-bottom:20px;
}
</style>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

<script type="text/javascript">
	window.οnlοad=function(){
		var aLi=document.getElementsByTagName('li');
		for(var i=0;i<aLi.length;i++){
			aLi[i].timer=null;
			aLi[i].οnmοuseοver=function(){
				startMove(this,400);
			}
			aLi[i].οnmοuseοut=function(){
				startMove(this,200);
			}
		}
	}
	
	function startMove(obj,iTarget){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			var speed=(iTarget-obj.offsetWidth)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(obj.offsetWidth==iTarget){
				clearInterval(obj.timer);
			}else{
				obj.style.width=obj.offsetWidth+speed+"px";
			}
		},30);
	}
</script>

2、多物体透明度改变

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画</title>
<style>
body,div{
	margin:0;
	padding:0;
}
div{
	width:200px;
	height:200px;
	background:red;
	filter:alpha(opacity:30);
	opacity:0.3;
	margin:10px;
	float:left;
}
</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
</body>
</html>

<script type="text/javascript">
	window.οnlοad=function(){
		var oDiv=document.getElementsByTagName('div');
		for(var i=0;i<oDiv.length;i++){
			oDiv[i].timer=null;
			oDiv[i].alpha=30;
			oDiv[i].οnmοuseοver=function(){
				startMove(this,100);
			}
			oDiv[i].οnmοuseοut=function(){
				startMove(this,30);
			}
		}
	}
	function startMove(obj,iTarget){
		clearInterval(obj.timer);//清除定时器
		obj.timer=setInterval(function(){//开定时器
			var speed=0;
			if(obj.alpha>iTarget){
				speed=-9;
			}else{
				speed=4;
			}
			if(Math.floor(Math.abs((obj.alpha-iTarget)/Math.abs(speed)))==0){
				clearInterval(obj.timer);
				obj.style.filter='alpha(opacity:'+iTarget+')';
				obj.style.opacity=iTarget/100;
				obj.alpha=iTarget;
			}else{
				obj.alpha+=speed;
				obj.style.filter='alpha(opacity:'+obj.alpha+')';
				obj.style.opacity=obj.alpha/100;
			}
		},30);
	}
</script>