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

<!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. jmeter+ant+jenkins+mac环境搭建

    一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.ANT环境:http://ant ...

  2. [转] - Configuring Android Studio: IDE & VM Options, JDK, etc

    Configuring Android Studio: IDE & VM Options, JDK, etc You should not edit any files in the IDE ...

  3. [转]解决：Entity Framework + MariaDb(MySql)中文乱码

    转自:http://fenglongsheng.com/post/6640.html 今天写一MVC4+Entity Framework+Mysql的小例子时,发现中文写到数据库里是N个问号(乱码哦~ ...

  4. Android异步任务机制之AsycTask

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. 本篇就说说AsyncTask的异步实现. 1.什么时候使用 AsnyncTask 在上一篇文章已经说了,主线程主要负 ...

  5. Android6.0之来电转接号码显示修改

    Android6.0之来电转接号码显示修改 手机来电转接界面是在,点开Dialer-搜索框右边的三个点-设置-通话账户(要先插卡)-中国移动或者中国联通--来电转接--第一行,显示始终转接 将所有来电 ...

  6. Opentaps安装小记

    这周了解了个MES项目需求,于是乎找了些开源项目了解下,有php+mysql写的weberp,配置起来相当方便,下一版webERP_v4.13,往F:\Apache\htdocs\一放,启动F:\Ap ...

  7. [WPF]TextTrimming截断后，ToolTip显示完整信息

    文本过长被截断后,用ToolTip显示完整信息. 文本未被截断,则不显示ToolTip. 值转换器: public class TrimmedTextBlockVisibilityConverter ...

  8. css学习笔记 4

    伪类可以用来指定一个或多个与其相关的选择符的状态,如a:link a:active a:hover a:visited :ie7及以下不支持. 注意:上面与超链接相关的伪类的顺序必须是:LVHA. 伪 ...

  9. HTTP历程

    原文http://www.ruanyifeng.com/blog/2016/08/http.html 1.HTTP/0.9 HTTP是基于TCP/IP协议的应用层协议.它不涉及数据包传输,主要规定了客 ...

  10. 点开看看please