js运动应用之运动框架

js运动应用之运动框架

<style>
	div{
		width:200px;
		height:200px;
		background-Color:yellow;
		float:left;
		font-size:14px;
	}
</style>

<script type="text/javascript">
	window.onload=function()
	{
		var oDiv1=document.getElementById('div1');
		//当鼠标移入height变为400px；
		oDiv1.onmouseover=function(){
			startMove(this,'height',400);
		}
		//当鼠标移出height回到200px（arrt参数在这里的值就是height）；
		oDiv1.onmouseout=function(){
			startMove(this,'height',200);
		}

		var oDiv2=document.getElementById('div2');
		//当鼠标移入width变为400px；
		oDiv2.onmouseover=function(){
			startMove(this,'width',400);
		}
		//当鼠标移出width回到200px（arrt参数在这里的值就是width）；
		oDiv2.onmouseout=function(){
			startMove(this,'width',200);
		}

		var oDiv3=document.getElementById('div3');
		//当鼠标移入fontSize变为400px；
		oDiv2.onmouseover=function(){
			startMove(this,'fontSize',50);
		}
		//当鼠标移出fontSize回到200px（arrt参数在这里的值就是fontSize）；
		oDiv2.onmouseout=function(){
			startMove(this,'fontSize',14);
		}

	}
	//取非行间样式(obj为对象，name为值)
	function getStyle(obj,name){
		if(obj,currentStyle){
			//针对IE浏览器取非行间样式
			return obj.currentStyle;
		}
		else{
			//针对IE外其他浏览器去非行间样式
			return getComputedStyle(obj,null)[name];
		}
	}
	
	//运动框架，为了让一个运动框架适用于多种运动，给定一个参数arrt，用哪个就赋哪些值！
	functio startMove(obj,arrt,target){
		//给定一个obj对象，关闭单个div定时器(互不干扰)
		clearInterval(obj.timer);
		obj.timer=seaInterval(function(){
			//取出非行间样式，减少代码量；
			var curr=parsent(getStyle(obj,arrt));
			
			var speed=(target-curr)/6;
			//向上取整
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			//如果到达目标点
			if(curr==target){
				//关闭计时器
				clearInterval(obj.timer);
			}
			else{
				//将结果加载到对应的样式上；
				obj.style[arrt]=curr+speed+'px';
			}
		},30)
	}
</script>

<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">字体变大</div>