js完美运动框架，想得到的效果基本能做到_js的运动框架可以做什么效果-CSDN博客

本文链接：https://blog.csdn.net/xpf_show/article/details/38442671

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>完美运动框架</title>
	<style type="text/css">
      div{width: 200px;height: 100px;filter:alpha(opacity=100);opacity: 1;background: #808800;}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript">
     window.οnlοad=function (){
     	var oDiv=document.getElementsByTagName('div')[0];
     	oDiv.οnmοuseοver=function()
     	{
     		startMove(this,{width:400,height:200});
     	}
     	oDiv.οnmοuseοut=function(){
     		startMove(this,{width:200,height:100});
     	}
     }

     function getCurrentStyle(obj,name){
       if(obj.currentStyle){
       	  return obj.currentStyle[name];
       }else{
       	return getComputedStyle(obj,null)[name];
       }
     }
    
    function startMove(obj,json,fnEnd){
      clearInterval(obj.timer);
      obj.timer=setInterval(function(){
      	var flag=true;
      	
      	for(var attr in json)
      	{   var cur=0;
      		if(attr=='opacity')
      		{
      			cur=Math.round(parseFloat(getCurrentStyle(obj,attr))*100);
      		}
      		else{
      			cur=parseFloat(getCurrentStyle(obj,attr));
      		}

         var speed=(json[attr]-cur)/6;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
         if(cur!=json[attr]) flag=false;
         if(attr=='opacity'){
         	obj.style.filter="alpha(opacity:"+(cur+speed)+')';
         	obj.style.opacity=(cur+speed)/100;
         }else{
         	obj.style[attr]=cur+speed+'px';
         }
          if(flag){
          	clearInterval(obj.timer);
          	if(fnEnd) fnEnd();
          }
      	}
      },30);
    }
	</script>
</body>
</html>