《js动画效果》之多物体动画

最新推荐文章于 2022-09-10 16:08:20 发布

MMRS

最新推荐文章于 2022-09-10 16:08:20 发布

阅读量600

点赞数

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/40041531

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。

多物体运动——给多个元素加上同一动画效果，比如下面两个例子：

1. 网页上有一ul, ul中有三个li元素，要求鼠标移到（onmouseover） li 元素上产生动画效果——宽度值增加到300px，鼠标移出（onmouseout) li 元素产生动画效果——宽度值复原到200px. 如下图-1示：

2. 同题 1 类似，只是要求改变li 的透明度值。如图-2时：

练习题1 代码实现：

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<style type="text/css">
 		*{
 			padding:0;
 			margin:0;
 		}
 		ul li{
 			list-style:none;
 			width:200px;
 			height:100px;
 			background:green;
 			margin:20px;
 		}
 		</style>
 		<script type="text/javascript">
 		/***
 			实现多物体运动的关键点：
 			1）获取到每个元素；
 			2）给每个元素绑定上事件；
 			3）注意使用this区分当前操作的元素；
 			4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug

 			记住：多物体运动不能共用同一个东西（某一参数，比如定时器）
 		***/
 			window.onload = function(){
 				var liEles = document.getElementsByTagName("li");

 				for(var i=0; i<liEles.length; i++){

 					//给每一个li元素定义一个定时器，避免多个元素抢同一个定时器造成bug
 					liEles[i].timer = null;
 					liEles[i].onmouseover = function(){

 						//传入this值，指定当前操作的是哪个li
 						playFun(this, 300);
 					};
 					liEles[i].onmouseout = function(){
 						playFun(this, 200);
 					};
 				}
 			}

 			//var timer = null;
 			function playFun(obj,itarget){
 				clearInterval(obj.timer);
 				obj.timer = setInterval(function(){
 					var speed = (itarget - obj.offsetWidth)/10;
 					speed = speed>0?Math.ceil(speed):Math.floor(speed);
 					
 					if(obj.offsetWidth == itarget){
 						clearInterval(obj.timer);
 					}else{
 						obj.style.width = obj.offsetWidth + speed + "px";
 					}
 				},50);
 			}
 		</script>
 	</head>
 	<body>
 		<ul>
 			<li></li>
 			<li></li>
 			<li></li>
 		</ul>
 	</body>
 </html>

练习题2代码实习：

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<style type="text/css">
 		*{
 			padding:0;
 			margin:0;
 		}
 		ul li{
 			list-style:none;
 			width:200px;
 			height:100px;
 			background:green;
 			margin:20px;
 			filter:alpha(opacity:30);
 			opacity:0.3;
 		}
 		</style>
 		<script type="text/javascript">
 		/***
 			实现多物体运动的关键点：
 			1）获取到每个元素；
 			2）给每个元素绑定上事件；
 			3）注意使用this区分当前操作的元素；
 			4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug
 			5)//给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug

 			记住：多物体运动不能共用同一个东西（某一参数，比如定时器）
 		***/
 			window.onload = function(){
 				var liEles = document.getElementsByTagName("li");

 				for(var i=0; i<liEles.length; i++){

 					//给每一个li元素定义一个定时器，避免多个元素抢同一个定时器造成bug
 					liEles[i].timer = null;

 					//给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug
 					liEles[i].alpha = 30;
 					liEles[i].onmouseover = function(){

 						//传入this值，指定当前操作的是哪个li
 						playOpacity(this, 100);
 					};
 					liEles[i].onmouseout = function(){
 						playOpacity(this, 30);
 					};
 				}
 			}

 			function playOpacity(obj,itarget){
 				clearInterval(obj.timer);
 				obj.timer = setInterval(function(){
 					var speed = 0;
 					if(obj.alpha > itarget){
 						speed = -10;
 					}else{
 						speed = 10;
 					}
 					
 					if(obj.alpha == itarget){
 						clearInterval(obj.timer);
 					}else{
 						obj.alpha += speed;
 						obj.style.filter = "alpha(opacity:"+ obj.alpha +")";
 						//注意除以100
 						obj.style.opacity = obj.alpha/100;
 					}
 				},50);
 			}
 		</script>
 	</head>
 	<body>
 		<ul>
 			<li></li>
 			<li></li>
 			<li></li>
 		</ul>
 	</body>
 </html>

小结：

实现多物体运动的关键点：

1）获取到每个元素；

2）给每个元素绑定上事件；

3）注意使用this区分当前操作的元素；

4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug

5) 给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug

记住：多物体运动不能共用同一个东西（某一参数，比如定时器）