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

首先，我们需要建立几个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. Leetcode 1254. 统计封闭岛屿的数目
			
    题目: 有一个二维矩阵 grid ,每个位置要么是陆地(记号为 0 )要么是水域(记号为 1 ). 我们从一块陆地出发,每次可以往上下左右 4 个方向相邻区域走,能走到的所有陆地区域,我们将其称为一座 ...
    
			
    2. 
						
  2. c# winform richtextbox控制每行颜色 + 滚动条始终滚动到最底部
			
    /// <summary> /// 输出 /// </summary> /// <param name="content"></param ...
    
			
    3. 
						
  3. Skipping unneeded JARs during scanning can improve startup time and JSP compilation time
			
    Tomcat在启动是提示: INFO [localhost-startStop-1] org.apache.jasper.servlet.TldScanner.scanJars At least on ...
    
			
    4. 
						
  4. python 在cmd时执行celery -A tasks worker --loglevel=info报错：failed to create process怎么解决
			
    在cmd命令前加 : python -m 命令(如:python -m celery -A tasks worker --loglevel=info) -m: 将库中的python模块用作脚本去运行, ...
    
			
    5. 
						
  5. Java选择结构和循环结构
			
    1.选择结构 ①.ifif(){ } if(){}else{} if(){}else if(){}else if(){}else{} ②.switch switch (表达式) { case 常量 1 ...
    
			
    6. 
						
  6. [原创]K8tools 20191111/K8工具合集
			
    K8tools 20191111 声明: 工具仅供安全研究或授权渗透,非法用途后果自负. 下载: https://github.com/k8gege/K8tools PS: 不定期更新,文件比较大,可 ...
    
			
    7. 
						
  7. Linux低延迟服务器系统调优
			
    最近做了一些系统和网络调优相关的测试,达到了期望的效果,有些感悟.同时,我也发现知乎上对Linux服务器低延迟技术的讨论比较欠缺(满嘴高并发现象):或者对现今cpu + 网卡的低延迟潜力认识不足(动辄 ...
    
			
    8. 
						
  8. CentOS修改ulimit
			
    一.概述 查看limit配置 # ulimit -a core data seg size (kbytes, -d) unlimited scheduling priority (-e) file s ...
    
			
    9. 
						
  9. 『Andrew and Chemistry 树同构』
			
    Andrew and Chemistry Description During the chemistry lesson Andrew learned that the saturated hydro ...
    
			
    10. 
						
  10. Docker 安装 Redis, 搭建 Redis 环境
			
    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 资深架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
    
			
    11.