完美运动框架(四）starMove(obj,json,fnEnd)

程序员文章站 2022-03-02 09:37:18

...

完美运动框架，支持链式运动，多物体运动互不干扰，同一物体多属性同时运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="div1"></div>
		<input type="text"   id="screen"/>
		<script src="js/index.js"></script>
	</body>
</html>

.div1{
	width: 100px;
	height: 100px;
	background-color: red;
	float: left;
	opacity: 0.3;
}

#screen{
	float: left;
}

var oDiv=document.getElementsByClassName("div1")[0];
var view=document.getElementById("screen");

 

oDiv.onmouseover=function ()
{
	starMove(this, {width:400,opacity:80});

}
oDiv.onmouseout=function ()
{
	starMove(this, {width:100,opacity:30});
}

//多物体任意属性框架
function starMove(obj,json,fnEnd)
{
	clearInterval(obj.timer)
	obj.timer=setInterval(function(){
		
		var bStop=true;  //用来标志是否所有的属性到达目标点
	for(var attr in json)
	{
				//获取当前样式值
		if(attr=="opacity")
		{
			//当前属性的值
			var cur =getStyle(obj,attr)*100;
		}
		else
		{
		var cur = parseInt(getStyle(obj,attr));
		}
		//判断，如果当前的属性的值没有达到目标值
		//还得继续循环
		if(cur!=json[attr])
		{
			bStop=false;
		}
		var speed=(json[attr]-cur)/4;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(Math.abs(json[attr]-cur)<=4)
		{
			if(attr=="opacity")
			{
				obj.style[attr]=json[attr]/100;
			}
			else
			{
				obj.style[attr]=json[attr]+"px";
			}
		
		}	
		 else
		 {
		 	  if(attr=="opacity")
		 	  {
		 	  	obj.style[attr]=((cur+speed)/10)/10.0;
		 	  
		 	  }
		 	  else
		 	  {
		 	  	 obj.style[attr]=cur+speed+"px";	
		 	  } 
		 }	
	}
	if(bStop)
	{
		clearInterval(obj.timer);
			if(fnEnd)
			{
				fnEnd();
			}
	}
		
		 	view.value= obj.style[attr];
	},30);

}


//获取样式
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.current[name];
	}
	else{
		return getComputedStyle(obj,false)[name];
	}
}