1 function getStyle(obj,name) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 } 5 else{ 6 return getComputedStyle(obj,false)[name]; 7 } 8 } 9 10 function startMove(obj,json,cFun) { 11 clearInterval(obj.timer); 12 obj.timer=setInterval(function(){ 13 var cur=0; 14 var bStop=true; //假设所有值都已经到了目标点 15 for(var attr in json){ 16 if(attr=='opacity'){ 17 cur=Math.round(parseFloat(getStyle(obj,attr))*100); 18 } 19 else{ 20 cur=parseInt(getStyle(obj,attr)); 21 } 22 23 var speed=(json[attr]-cur)/6; 24 speed=speed>0?Math.ceil(speed):Math.floor(speed); 25 26 if(cur!=json[attr]){ 27 bStop=false; 28 } 29 30 if(attr=='opacity'){ 31 obj.style.filter='alpha(opcity:'+(cur+speed)+')'; 32 obj.style.opacity=(cur+speed)/100; 33 } 34 else{ 35 obj.style[attr]=cur+speed+'px'; 36 } 37 } 38 if(bStop){ 39 clearInterval(obj.timer); 40 if(cFun)cFun(); 41 } 42 },30); 43 }
使用方式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 300px; height: 300px;background-color:red;opacity: 0.3;} 8 </style> 9 <script src="move2.js"></script> 10 <script> 11 window.onload=function(){ 12 var oDiv=document.getElementById('div1'); 13 14 oDiv.onmouseover=function(){ 15 startMove(oDiv,{600,height:600,opacity:100},function(){ 16 }) 17 } 18 oDiv.onmouseout=function(){ 19 startMove(oDiv,{300,height:300,opacity: 30},function(){ 20 }) 21 } 22 } 23 </script> 24 </head> 25 <body> 26 <div id="div1"> 27 </div> 28 </body> 29 </html>