js笔记---封装一般运动

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	div{ width:100px; height:100px; background-color:red;  margin-top:20px;}
</style>
<script type="text/javascript">

window.onload=function(){
		var oDiv=document.getElementsByTagName(‘div‘);
		//int i=0;
		//for(i=0;i<oDiv.length;i++){
				
			//}
		oDiv[0].onmouseover=function(){
				StarMove(this,300,‘width‘);
			}
		oDiv[0].onmouseout=function(){
				StarMove(this,100,‘width‘);
			}	
		oDiv[1].onmouseover=function(){
				StarMove(this,150,‘height‘);
			}
		oDiv[1].onmouseout=function(){
				StarMove(this,100,‘height‘);
			}	
	}
//获取兼容的对应属性值
function getStyle(obj,attr){
		if(obj.currentStyle){
				return obj.currentStyle[attr];
			}
		else{
				return getComputedStyle(obj,false)[attr];
			}
	}

function StarMove(obj,iTarget,attr){
		clearInterval(obj.timer);//清掉对应的 对象的定时器
		
		obj.timer=setInterval(function(){
			var iCur=parseInt(getStyle(obj,attr));
			var iSpeed=(iTarget-iCur)/8;
			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
				if(iCur==iTarget){
						clearInterval(obj.timer);
					}
				else{
						obj.style[attr]=iCur+iSpeed+‘px‘;
					}
			},30);	
	}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

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

js笔记---封装一般运动