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

<!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. activity通过onActivityResult间数据交互

    首先要创建2个activity 分别为MainActivity和OneActiivity MainActivity代码如下: package com.tp.soft.app; import andro ...

  2. 为什么说invalidate()不能直接在线程中调用

      1.为什么说invalidate()不能直接在线程中调用?2.它是怎么违背单线程的?3.Android ui为什么说不是线程安全的?4.android ui操作为什么一定要在UI线程中执行? 1. ...

  3. Android Intent

    Intent在Android中的重要性不言而喻.本文主要总结下Intent使用过程中需要注意的一些问题. 1.隐式Intent AndroidManifest.xml声明时<intent-fil ...

  4. vCSA加域&vcenter关联域&设置管理员权限

    vCSA 与 Windows vCenter对比 1.部署起来更简单快捷. 2.vCSA基于Linux授权费用节省. 3.功能在6.0之后达到与Windows vCenter一样的功能,之后可能会反超 ...

  5. asp.net lodop单个打印

    1.首先在列表页面增加以下代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&quo ...

  6. mac命令学习记录

    1. 查找程序运行路径: which xxxx 2. 查找文件安装路径: whereis xxxx; 3. 编辑配置文件:vi ./.xxx : 进入需要编辑的文件: i  进行编辑  :输入:wq ...

  7. Html锚点定位偏差计算解决插件

    /*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...

  8. Ubuntu Server 配置网络

    ------------------ Ubuntu 14.04   x86_64 ----------------- 设置静态IP:vi /etc/network/interfaces. 然后再编辑 ...

  9. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  10. (转抄：人人都是产品经理——iamsujie)如何提高产品规划PPT的能力

    做产品几年之后,不可避免的要碰到写规划这件事儿,虽说不少人,不乏大牛,对规划持“无用论”的观点, 但大多数人其实还是更相信这个段子: 在一个公司里,看一个人的地位,主要看他平时写的文档类型——写wor ...