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

首先，我们需要建立几个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. Tarjan 算法求 LCA / Tarjan 算法求强连通分量
			
    [时光蒸汽喵带你做专题]最近公共祖先 LCA (Lowest Common Ancestors)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili tarjan LCA - YouTube Tarj ...
    
			
    2. 
						
  2. JNA 调用操作系统函数 和 系统调用
			
    linux系统调用syscall 表:https://filippo.io/linux-syscall-table/ Linux Namespace 特性简要介绍 原文:https://iliangq ...
    
			
    3. 
						
  3. spring boot2X整合nacos一使用Feign实现服务调用
			
    服务调用有两种方式: A.使用RestTemplate 进行服务调用 查看 B.使用Feign 进行声明式服务调用 上一次写了使用RestTemplate的方式,这次使用Feign的方式实现 服务注册 ...
    
			
    4. 
						
  4. 【C/C++开发】STL内嵌数据类型： value_type
			
    使用stl库的时候一直对value_type这个东西理解的不是很好,可以说就是不理解.今天看了<STL源码剖析>才恍然大悟.这里稍作记录. 每个STL中的类都有value_type这种东西 ...
    
			
    5. 
						
  5. ASP.NET Core的无状态身份认证框架IdentityServer4
			
    Identity Server 4是IdentityServer的最新版本,它是流行的OpenID Connect和OAuth Framework for .NET,为ASP.NET Core和.NE ...
    
			
    6. 
						
  6. 第四节：EF Core的并发处理
			
    1.说明 和EF版本的并发处理方案一致,需要知道乐观并发和悲观并发的区别,EF Core只支持乐观并发:监控并发的两种方案:监测单个字段和监测整条数据,DataAnnotations 和 Fluent ...
    
			
    7. 
						
  7. Java使用正则表达式匹配多行  Pattern flags
			
    Java中正则匹配有多种模式,若不选择模式则默认为单行匹配 匹配模式(Pattern flags) compile()方法有两个模式 未开匹配模式 Pattern compile(String reg ...
    
			
    8. 
						
  8. Linux低延迟服务器系统调优
			
    最近做了一些系统和网络调优相关的测试,达到了期望的效果,有些感悟.同时,我也发现知乎上对Linux服务器低延迟技术的讨论比较欠缺(满嘴高并发现象):或者对现今cpu + 网卡的低延迟潜力认识不足(动辄 ...
    
			
    9. 
						
  9. 记一个Redis分布式事务锁
			
    package com.mall.common; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory. ...
    
			
    10. 
						
  10. 百度前端技术学院task15源代码
			
    这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...
    
			
    11.