1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 200px; height: 200px;background-color:red; 8 filter: alpha(opacity:30); opacity: 0.3;} 9 </style> 10 <script> 11 window.onload=function(){ 12 var oDiv=document.getElementById('div1'); 13 14 oDiv.onmouseover=function(){ 15 startMove(100); 16 }; 17 oDiv.onmouseout=function(){ 18 startMove(30); 19 }; 20 } 21 var alpha=30; 22 var timer=null; 23 24 function startMove(iTarget){ 25 var oDiv=document.getElementById('div1'); 26 27 clearInterval(timer); 28 timer=setInterval(function(){ 29 var speed=0; 30 31 if(alpha<iTarget){ 32 speed=10; 33 }else { 34 speed=-10; 35 } 36 37 38 if(alpha==iTarget){ 39 clearInterval(timer); 40 } 41 else{ 42 alpha+=speed; 43 44 oDiv.style.filter='alpha(opacity:'+alpha+')'; 45 oDiv.style.opacity=alpha/100; 46 } 47 },30); 48 } 49 50 </script> 51 </head> 52 <body> 53 <div id="div1"> 54 </div> 55 </body> 56 </html>