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

<!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. JVM 新生代老年代

    1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...

  2. rgb转16进制 简单实现

    function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }

  3. android面试题

    1. 请描述一下Activity 生命周期. 答: 如下图所示.共有七个周期函数,按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onP ...

  4. JavaScript中有关数字的精确计算

    问题这样的: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) ,我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会 ...

  5. fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  6. 记录centos6.8安装Oracle10.2.0.1过程中的错误解决

    [root@hadoop01 database]# ./runInstaller ./runInstaller: /opt/database/install/.oui: /lib/ld-linux.s ...

  7. centos7装机和初步运维

    1.装机-制作U盘启动盘 CentOS7是一个比较新的版本.在服务器领域用得比较多.因为前安装软件可能没有Ubuntu那样方便,所以桌面领域好像不是很多. https://www.centos.org ...

  8. phpstorm使用手册

    参考:http://www.cnblogs.com/luojianqun/p/4596052.html 罗总说这是php最好的IDE,phpstorm9.02,没有之一.各种功能各种好,罗总此等大神说 ...

  9. poj 1328 Radar Installation

    题目链接:http://poj.org/problem?id=1328 题意:给出海上有n个小岛的坐标,求发出的信号可以覆盖全部小岛的最少的雷达个数.雷达发射信号是以雷达为圆心,d为半径的圆,雷达都在 ...

  10. jmeter接口测试

    一.Jmeter简介 Jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,不像loadrunner那样体积大,是一个比较轻量级的测试工具,使用起来非常的简单 ...