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

<!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. C# WebService服务Post提交

    public string WebServerTest(string PostData) { PostData = "jsonData=" + PostData; string P ...

  2. 将JSON对象带有格式的写出到文件中

    需求:将一个JSON对象写出到文件中,要求文件中的JSON数据带有简单的格式.代码的实现参考了Java算法中的栈处理括号匹配问题.好了,不多说了,下面是代码的实现. 代码: package gemu. ...

  3. WPS 认证机制

    WPS 认证机制 WPS(Wi-Fi Protected Setup,Wi-Fi保护设置)(有的叫做AOSS.有的叫做QSS,不过功能都一致.)是由Wi-Fi联盟组织实施的认证项目,主要致力于简化无线 ...

  4. Kafka是如何实现高吞吐率的

    Kafka是如何实现高吞吐率的 原创 2016-02-27 杜亦舒 性能与架构 Kafka是分布式消息系统,需要处理海量的消息,Kafka的设计是把所有的消息都写入速度低容量大的硬盘,以此来换取更强的 ...

  5. C# 基础知识总结

    要学好C#,基础知识的重要性不言而喻,现将常用到的一些基础进行总结,总结如下: 1. 数据类型转换: 强制类型转换(Chart--> int):  char cr='A';   int i = ...

  6. [WPF]MenuItem右侧空白

    <Window> <Grid Background="SteelBlue"> <Grid.ContextMenu> <ContextMen ...

  7. SSH框架总结

    首先,SSH是由多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责 ...

  8. JAVA OO 第二章知识点

    一.JAVA的基础语法 1.关键字 ①关键字:关键字用于定义该门语言,且这些单词对编译器用特殊的含义,而且不能作为标识符. 2.标识符 标识符:在JAVA中我们备选的单词,包括:类名.方法名.字段.变 ...

  9. Right Here Waiting

    俺不会和小时候一样,因为别人听,自己就不听了^^

  10. vue的选项

    这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...