多个物体这不能使用一个定时器了，要给每个物体一个定时器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>多物体运动</title>

	<style>

    body{margin: 0px;padding: 0px;}

		.animation{

			background-color: green;

            margin: 10px 0px;

            padding: 0px;

			height: 100px;

			width: 100px;

			left: 0px;

			top: 0px;

            position: relative;

		}

	</style>

</head>

<body>

	<div  class="animation">A</div>

    <div  class="animation">B</div>

    <div  class="animation">C</div>

</body>

 <script type="text/javascript">

    window.onload = function(){

    	var ele = document.getElementsByTagName("div"),

            WINDOW_WIDTH = window.innerWidth - 100;

            for (var i = 0; i < ele.length; i++) {

                ele[i].timer = null;

                ele[i].onmouseover = function(){

                    startAnimation(this);

                }

            };

    	function startAnimation(obj){

    		clearInterval(obj.timer);

    		obj.timer = setInterval(function(){

                var _left = obj.offsetLeft,

                    _speed = Math.ceil((WINDOW_WIDTH - _left)/100);

    			if (obj.offsetLeft >= WINDOW_WIDTH){

    				clearInterval(obj.timer);

    			}else{

                    obj.style.left = obj.offsetLeft+ _speed +'px';

                    console.log(obj.style.left);

                    console.log(obj.offsetLeft);

                }

    		},1)

    	}

    }

 </script>

</html>

　　这里给每个div加上一个定时器~~ 还要注意的就是给body加上margin:0px;padding:0px;如果不加的话，那么obj.style.left和obj.offsetLeft是不会相等（因为我们这里使用的是相对定位）

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

  1. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  2. js动画---多物体运动

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

  3. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  4. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  5. js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  6. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  7. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  8. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  9. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

随机推荐

  1. AspNet MVC中各种上下文理解

    0  前言 AspNet MVC中比较重要的上下文,有如下: 核心的上下文有HttpContext(请求上下文),ControllerContext(控制器上下文) 过滤器有关有五个的上下文Actio ...

  2. iOS开发 iOS10兼容访问http

    添加NSAppTransportSecurity的字典会自动变成  AppTransportSecurity再添加 allow Arbitary Loads  Boolean   YES

  3. Windows 7 封装篇（一）【母盘定制】[手动制作]定制合适的系统母盘

    Windows 7 封装篇(一)[母盘定制][手动制作]定制合适的系统母盘 http://www.win10u.com/article/html/10.html Windows 7 封装篇(一)[母盘 ...

  4. 遇到 java.io.EOFException 异常的解决办法

    可以试着clean项目后再启动!原因未明

  5. folder、source folder、package 区别与联系

    在eclipse下,package,source folder,folder都是文件夹.  它们的区别如下:  package:当你在建立一个package时,它自动建立到source folder下 ...

  6. js刷新框架子页面的七种方法代码

    面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做.其中framedemo.html由上下两个页面组成,代码如下: <!DOCTYP ...

  7. OpenGL利用模板测试实现不规则裁剪

    本文是原创文章,如需转载,请注明文章出处 在游戏开发中,经常会有这样的需求:给定一张64x64的卡牌素材,要求只显示以图片中心为圆点.直径为64的圆形区域,这就要用到模板测试来进行不规则裁剪. 实现不 ...

  8. psql

    1.sudo passwd postgres 2.sudo -u postgres createuser -P django_login 3.su postgres 4.psql 5.CREATE D ...

  9. CProgressCtrl进度条

    CProgressCtrl进度条 使用方法总结 标签: CProgressCtrlmfc 2016-03-03 09:19 762人阅读 评论(0) 收藏 举报  分类: MFC(11)  版权声明: ...

  10. 初探Backbone

    Backbone简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ B ...