首先，我们须要知道在js中获取对象的宽度如offsetWidth等。可能会存在一些小小的bug。原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度。并不包括内边距，边框和外边距。这样会导致控制对象运动与预期不符。这里就不具体的去解释。

而为了解决问题。在这里。我们提供了一个方法来保证我们的运动的准确性。

style仅仅能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

currentStyle能够弥补style的不足。可是仅仅适用于IE。

getComputedStyle同currentStyle作用同样，可是适用于FF、opera、safari、chrome。

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8"/>

	<style type="text/css">

      #div1,#div2{width: 200px;height: 100px;background: #800808;margin-bottom: 2em;}

	</style>

	<script type="text/javascript">

	window.onload=function(){

		var oDiv=document.getElementsByTagName('div');

		var oDiv1=document.getElementById('div1');

		var oDiv2=document.getElementById('div2');

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

		{

			oDiv[i].timer=null;

			oDiv1.onmouseover=function(){

				startMove(this,'height',400);

			}

			oDiv1.onmouseout=function(){

				startMove(this,'height',100);

			}

			oDiv2.onmouseover=function(){

				startMove(this,'width',400);

			}

			oDiv2.onmouseout=function(){

				startMove(this,'width',200);

			}

		}

	}

	function getStyle(obj,attr)

	{

		if(obj.currentStyle)

		{

			return obj.currentStyle[name];

		}else{

			return getComputedStyle(obj,null)[attr];

		}

	}

      function startMove(obj,attr,iTarget)

      {

        clearInterval(obj.timer);

        obj.timer=setInterval(function(){

        	var cur=parseInt(getStyle(obj,attr));

        	var speed=(iTarget-cur)/6;

        	speed=speed>0?Math.ceil(speed):Math.floor(speed);

        	if(cur=='iTarget')

        	{

        		clearInterval(obj.timer);

        	}

        	else{

        		obj.style[attr]=cur+speed+"px";

        	}

        },30);

      }

	</script>

</head>

<div id="div1"></div>

<div id="div2"></div>

</html>

在这里注意：

currentStyle和getComputedStyle仅仅能用于获取页面元素的样式，不能用来设置相关值。

假设要设置对应值，应使用style。

js实现多物体运动框架并兼容各浏览器的更多相关文章

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

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

  2. 多物体运动框架案例一：多个Div的宽度运动变化

    多物体运动框架,鼠标移入Div,此Div逐渐变宽,鼠标移出后,此Div逐渐缩短恢复原长度. <!doctype html> <html> <head> <ti ...

  3. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  4. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  5. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

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

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

  7. JS定时器做物体运动

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

  8. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. word图片自动编号与引用(转)

    http://blog.csdn.net/hunauchenym/article/details/5915616 用Word时,可能会遇到文中使用了大量的图片的情况,这时,若采用手动为图片编号的方法, ...

  2. Boosted Tree

    原文:http://www.52cs.org/?p=429 作者:陈天奇,毕业于上海交通大学ACM班,现就读于华盛顿大学,从事大规模机器学习研究. 注解:truth4sex  编者按:本文是对开源xg ...

  3. .7z.001,.7z.002这样的文件如何解压

    1 如图所示,压缩分卷没有显示关联的软件来打开,Winrar右击也无法解压 2 可以使用7-ZIP软件打开该文件,然后选择提取(相当于Winrar的解压),然后选择提取路径,默认是同一个文件夹,点击确 ...

  4. Python网络编程 - 一个简单的客户端Get请求程序

    import socket target_host = "www.baidu.com" target_port = 80 # create a socket object clie ...

  5. Oracle 与 SqlServer 的区别浅析总结

    我主要用过的数据库为Oracle10g和SqlServer2008,通过实际运用和查阅资料整理如下: 主题 Oracle 10g SQLServer 2008 存储过程格式 Create Or Rep ...

  6. C# WebRequest处理Https请求

    http://www.cnblogs.com/youlechang123/archive/2013/03/23/2976630.html 正常情况下,处理https和http没有什么区别,如以下代码, ...

  7. Java连接Oracle数据库示例

    1.数据库复用模块 package cn.jzy.database; import java.sql.Connection; import java.sql.DriverManager; import ...

  8. Hibernate(六)一对多映射(多对一)

    一.Hinbernate中持久化类的关联关系 在数据库中,表表之间是通过外键关联的,在程序中是要转化为持久化类也就是(JAVA Bean)来实例的. 但在Hibernater中持久化的之间的映射关系, ...

  9. 在VC中创建DLL文件的方法步骤

    一.Win32动态链接库 1.制作的步骤: (1)新建WIN32 Dynamic-link Library工程,工程名为MyDll,选择A simple DLL project类型. (2)MyDll ...

  10. 安装 启动sshd服务：

    .先确认是否已安装ssh服务: [root@localhost ~]# rpm -qa | grep openssh-server openssh-server-.3p1-.fc12.i686 (这行 ...