Js动画-多物体运动（四）

最新推荐文章于 2022-10-20 21:20:54 发布

依稀梦兮

最新推荐文章于 2022-10-20 21:20:54 发布

阅读量141

点赞数

分类专栏： # 前端 JAVA

本文链接：https://blog.csdn.net/qq_40860484/article/details/88980095

版权

JAVA 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

利用li实现运动

<html>
 <head>
  <title>浏览器对象</title> 
  <style type="text/css">
  body
  {
  	padding:0px;
	margin:0px;
  }
  #dom
  {
  	width:100px;
  	height:50px;
  	background:yellow;
  	margin-bottom:20px;
  }
  </style> 
  <script>
 	window.onload=function()
 	{
 		var Div=document.getElementsByTagName("li");    //获取li注意单词拼写
 		for(var i=0;i<Div.length;i++)        
 		{
 			Div[i].onmouseover=function()
 	 		{
 	 			startMove(this,400);
 	 		}
 	 		Div[i].onmouseout=function()
 	 		{
 	 			startMove(this,200);
 	 		}
 		}
 		
 	}
 	var timer=null;
 	function startMove(obj,target)
 	{
 		clearInterval(timer);
 		var speed=0;
 		timer=setInterval
 		(
 			function()
 			{
 				speed=(target-obj.offsetWidth)/8;
 				speed=speed>0?Math.ceil(speed):Math.floor(speed);
 				if(obj.offsetWidth==target)
 				{
 					clearInterval(timer);
 				}
 				else
 				{
 					obj.style.width=obj.offsetWidth+speed+"px";
 					
 				}
 			},30	
 		)
 	}
 </script> 
 </head>
 <body>
  <ul>
  	<li id="dom"></li>
  	<li id="dom"></li>
  	<li id="dom"></li>
  </ul>
</body>
</html>

这个方式实现有一个问题，因为共享一个计时器的原因所以当迅速调到其他块的时候会出现问题

解决方法:

window.onload=function()
 	{
 		var Div=document.getElementsByTagName("li");
 		for(var i=0;i<Div.length;i++)
 		{
 			Div[i].timer=null;    //每个li使用自己的计时器
 			Div[i].onmouseover=function()
 	 		{
 	 			startMove(this,400);
 	 		}
 	 		Div[i].onmouseout=function()
 	 		{
 	 			startMove(this,100);
 	 		}
 		}
 		
 	}

记录:

getElementsByTagName() //获取多个块，可以是div
Obj.index //每个obj可以设置自己的属性例:obj.timer

依稀梦兮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js动画-多物体运动（四）

利用li实现运动<html> <head> <title>浏览器对象</title> <style type="text/css"> body { padding:0px; margin:0px; } #dom { width:100px; height:50px; back...
复制链接

扫一扫

专栏目录