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

首先，我们需要建立几个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. Hyperledger Fabric 1.4 快速环境搭建
			
    自己的硕士研究方向和区块链有关,工程上一直以IBM的Hyperledger Fabric为基础进行开发,对该项目关注也有两年了.目前迎来了Hyperledger Fabric v1.4,这也是Fabr ...
    
			
    2. 
						
  2. .NET Core 获取自定义配置文件信息
			
    前言 .net core来势已不可阻挡.既然挡不了,那我们就顺应它.了解它并学习它.今天我们就来看看和之前.net版本的配置文件读取方式有何异同,这里不在赘述.NET Core 基础知识. ps:更新 ...
    
			
    3. 
						
  3. 快速排序详解（C语言/python）
			
    快速排序详解 介绍: 快速排序于C. A. R. Hoare在1960年提出,是针对冒泡排序的一种改进.它每一次将需要排序的部分划分为俩个独立的部分,其中一个部分的数比的数都小.然后再按照这个方法对这 ...
    
			
    4. 
						
  4. 2、word插入目录、图/表
			
    一.word插入目录 依次对每个标题在“段落”中进行大纲级别选择. 光标定位于目录生成的页面,再“引用”->“目录”->选择“自动目录1/2”,则可自动生成目录.若目录有所更改,则可选择“ ...
    
			
    5. 
						
  5. SAINT学习笔记
			
    SAINT的介绍 SAINT(Significance Analysis of INTeractome)是一种概率方法,用于在亲和纯化-质谱(AP-MS)实验中对阴性对照的诱饵-猎物相互作用进行打分, ...
    
			
    6. 
						
  6. [转帖]在 Kubernetes 离线部署 KubeSphere
			
    在 Kubernetes 离线部署 KubeSphere https://kubesphere.io/docs/v2.0/zh-CN/installation/install-ks-offline/  ...
    
			
    7. 
						
  7. Docker在Windows上的初体验
			
    作为Docker的初学者,我有几个疑问,找到了答案,并实践了一下,希望对和我一样的初学者有帮助: 1.Docker是什么? 大家对虚拟机应该比较熟悉,虚拟机和docker都是为了实现隔离. 虚拟机隔离 ...
    
			
    8. 
						
  8. myeclipse导入项目中文乱码怎么解决教程
			
    大家在Myeclipse导入项目的时候,应该都遇见过一些乱码的问题,不单单只是Myeclipse有这个问题,那么怎么解决Myeclipse导入项目乱码的问题呢,问题出现的原因是什么呢,下面来看看答案. ...
    
			
    9. 
						
  9. Elasticsearch常见用法-分布式集群
			
    集群内部工作方式 Elasticsearch用于构建高可用和可扩展的系统.扩展的方式可以是购买更好的服务器(纵向扩展(vertical scale or scaling up))或者购买更多的服务器( ...
    
			
    10. 
						
  10. C# Winform控件字体大小自适应
			
    using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; namespace WGClie ...
    
			
    11.