js实现多物体运动框架并兼容各浏览器

浏览数：68 / 时间：2015年06月09日

首先，我们需要知道在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实现多物体运动框架并兼容各浏览器,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js实现多物体运动框架并兼容各浏览器