对于多物体运动和单个物体运动来说，没有特别大的区别，实现原理基本上是一样的，都是通过定时器来实现的，但是多物体有一些地方需要注意，具体哪些需要注意，我将在下面的程序中说明。

首先，我们需要建立几个li

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

然后，我们简单的对着几个里设置一下样式

*{

    margin:0px;

    padding:0px;

}

 li{

    width:200px;

    height:100px;

    background-color:red;

    margin-bottom:30px;

}

最后，我们来实现一下多物体运动

window.onload=function(){

    var ls=document.getElementsByTagName("li");

    for(var i=0,l=ls.length;i<l;i++){

        ls[i].timer=null;//这一句是什么意思？其实这一句的作用是为每个元素设置一个定时器。

        ls[i].onmouseover=function(){

            startMove(this,400);

        }

        ls[i].onmouseout=function(){

            startMove(this,200);

        }

    }

}

function startMove(object,Target){

    clearInterval(object.timer);

    object.timer=setInterval(function(){

        var speed=(Target-object.offsetWidth)/10;

        speed=speed>0? Math.ceil(speed):Math.floor(speed);//这个地方依然需要注意的。易错点

        if(object.offsetWidth==Target){//这个地方容易出错，易错点。

            clearInterval(object.timer);

        }else{

            object.style.width=object.offsetWidth+speed+"px";//这个地方千万要注意小细节！！易错点！！！

        }

    },50)

}

上面我们为每个li都设置了一个定时器，因为我们的函数中有删除定时器，添加定时器，为了不让几个物体之间产生混乱，我们为每个li都添加定时器，这样会避免不必要的麻烦。

还有上面标注了三个易错点，我来讲述一下为什么是易错点，容易犯什么样的错误？

首先，这一句

 speed=speed>0? Math.ceil(speed):Math.floor(speed);
我们一定要进行向上或者向下取整，为什么呢？因为如果我们不进行这些操作的话，到后来无法达到目标值（200,400），最终达到的是接近他们的值。第二，对于speed是正值的时候我们是向上取整，反之，负值时我们向下取整。

第二个易错点：
object.offsetWidth==Target
这一句话有什么问题呢？
其实这一句话是没有问题的，只不过要注意一点，我们有的人经常会写成这样object.style.width==target;这样就大错特错了，为什么呢？因为object.style.width只能进行赋值，不能获取元素的宽度值。

第三个易错点
 object.style.width=object.offsetWidth+speed+"px";
这个易错点跟第二个易错点有点类似。
有的人会这样写object.style.width=object.style.width+speed+"px"或者  object.offsetWidth=object.offsetWidth+speed+"px";
这两句都不对，第一句是因为
object.style.width  是无法获得值的，所以  object.offsetWidth+speed+"px";这句话是没有意义的

其次第二句是因为 object.offsetWidth是无法进行赋值的，所以
object.offsetWidth="....",也是没有意义的

最后一个易错点是，object.style.width;这里面的width中的w是小写的，千万别大写了。
												


											
js动画---多物体运动的更多相关文章
	

    
								
  1. js动画之简单运动一
		
    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...
    
		
    2. 
						
  2. js多个物体运动问题2
		
    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...
    
		
    3. 
						
  3. js多个物体运动的问题1
		
    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例  ...
    
		
    4. 
						
  4. JS定时器做物体运动
		
    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...
    
		
    5. 
						
  5. js动画之缓冲运动
		
    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head>  ...
    
		
    6. 
						
  6. js动画之同时运动
		
    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...
    
		
    7. 
						
  7. js动画之链式运动
		
    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
    
		
    8. 
						
  8. js实现多物体运动框架并兼容各浏览器
		
    首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...
    
		
    9. 
						
  9. js动画之简单运动二
		
    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [Gamma]阶段测试报告
			
    后端测试 我们进行了覆盖性测试,覆盖率达到77%. Beta阶段发现的Bug 项目显示的图片错误 无法使用搜索框 发布实验室项目的按钮点击无法跳转 连续点击发帖按钮可能发出多个相同的帖子 不需要点击我 ...
    
			
    2. 
						
  2. c语言之函数指针应用
			
    c语言之函数指针应用 1.函数指针与指针函数 在开始运用函数指针前,我们需要将两个概念即:函数指针与指针函数搞清楚. 函数指针,指明这个一个函数,但返回值为指针类型,语法格式为: 类型名* 函数名A( ...
    
			
    3. 
						
  3. Zuul之路由熔断
			
    Zuul作为Netflix组件,可以与Ribbon.Eureka.Hystrix等组件结合,实现负载均衡.熔断器的功能 Spring boot2X集成zuul与consul实现负载均衡和反向代理 当后 ...
    
			
    4. 
						
  4. 一文带你了解 Flink 的基本组件栈
			
    作为实时计算领域的佼佼者,Flink 的基本组件同样值得我们仔细研究. Flink 同样遵循着分层的架构设计理念,在降低系统耦合的同时,也为上层用户构建 Flink 应用提供了丰富且友好的接口. Fl ...
    
			
    5. 
						
  5. mapreduce 函数入门   一
			
    MapReduce 程序的业务编码分为两个大部分,一部分配置程序的运行信息,一部分 编写该 MapReduce 程序的业务逻辑,并且业务逻辑的 map 阶段和 reduce 阶段的代码分别继 承 Ma ...
    
			
    6. 
						
  6. VisualStudio更改项目文件夹名称
			
    新建了一个空的解决方案(SolutionTest.sln),在文件夹Api中新建了一个webapi项目,物理位置为解决方案根目录下的叫Api文件夹里, 现在想把文件夹名由Api改为MyApi,需要做以 ...
    
			
    7. 
						
  7. 第十节：Asp.Net Core 配置详解和选项模式
			
    一. 各种文件的读取 1.说明 在.Net Core中,各种配置文件的读取都需要依赖[Microsoft.Extensions.Configuration]程序集,当然在Asp.Net Core中已经 ...
    
			
    8. 
						
  8. 2014百度之星 Party
			
    Party Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
    
			
    9. 
						
  9. 【题解】Luogu P5301 [GXOI/GZOI2019]宝牌一大堆
			
    原题传送门 首先先要学会麻将,然后会发现就是一个暴力dp,分三种情况考虑: 1.非七对子国士无双,设\(dp_{i,j,k,a,b}\)表示看到了第\(i\)种牌,一共有\(j\)个\(i-1\)开头 ...
    
			
    10. 
						
  10. 安装和启动docker
			
    1.安装和启动docker yum update -y yum install -y yum-utils yum-config-manager --add-repo https://download. ...
    
			
    11.