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

首先，我们需要建立几个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. elasticsearch 基于 rollover 管理按时间递增的索引 合并 删除
			
    https://www.elastic.co/cn/blog/managing-time-based-indices-efficiently Anybody who uses Elasticsearc ...
    
			
    2. 
						
  2. vux scroller在iOS13上，一停止滑动就跳到顶部
			
    转载:https://blog.csdn.net/sllailcp/article/details/102502452 今天客户反馈的问题,说在最新版的iOS上(iOS13),滑动列表,滑完就会跳到顶 ...
    
			
    3. 
						
  3. iOS 测试 WebDriverAgent 简介
			
    WebDriverAgent 是什么   去年的 SeleniumConf 上,Facebook 推出了一款新的iOS移动测试框架 —— WebDriverAgent,当时的推文上,写的还只支持模拟器 ...
    
			
    4. 
						
  4. [转帖]美团在Redis上踩过的一些坑-5.redis cluster遇到的一些问题
			
    美团在Redis上踩过的一些坑-5.redis cluster遇到的一些问题 博客分类: redis 运维 redis clustercluster-node-timeoutfailover  转载请 ...
    
			
    5. 
						
  5. Springboot Actuator之十一：actuator transaction
			
    前言spring boot 的自动化配置其实就是在spring 的基础上做的封装,在我们之前对mvc,aop的自动化配置中可以发现–> 只是在spring 的基础上添加了一些特性,可以认为只是一 ...
    
			
    6. 
						
  6. NP完全问题的证明
			
    目录 NP完全问题的证明 一.限制法 最小覆盖问题(VC) 子图同构问题 0-1背包(Knapsack) 三元集合的恰当覆盖(X3C) 集中集 有界度的生成树 多处理机调度 二.局部替换法 3SAT问 ...
    
			
    7. 
						
  7. 用ab每隔30分钟并发一次休息10分钟
			
    linux脚本监控程序运行情况(重启程序)主要有两种情况:一种是一个可执行文件:如shell脚本文件:另一种是使用python打开的多个程序.第一种:它的进程名字由路径名字和程序名字组成,比如:我有个 ...
    
			
    8. 
						
  8. 【vue】搭建vue环境以及要安装的所有东西
			
    参考地址: https://www.cnblogs.com/laizhouzhou/p/8027908.html
    
			
    9. 
						
  9. SQL Server优化之SET STATISTICS开关（转载）
			
    一.准备工作 缓存对于某个查询的性能影响十分之大,所以优化之前要清空缓存. 清除Buffer Pool里面的所有缓存 DBCC DROPCLEANBUFFERS 清除Buffer Pool里的所有缓存 ...
    
			
    10. 
						
  10. Android 权限的一些细节
			
    Android 权限的一些细节 1 哪些app属于system app?为了区分privilege app和system app,这里先说明system app是什么,避免之后的讨论概念混乱. 在Pa ...
    
			
    11.