1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 body{ margin:0; padding:0; } 8 .ss{ 100px; height:100px; background: #009; position: absolute; top:100px; left:100px; opacity:0.1} 9 10 11 </style> 12 </head> 13 14 <body> 15 16 <div class="ss" id="a"> 17 18 </div> 19 <script type="text/javascript"> 20 var obox=document.getElementById("a"); 21 obox.onmouseover=function(){ 22 opcity(100); 23 } 24 obox.onmouseout=function(){ 25 opcity(10); 26 } 27 28 var alpha=10; 29 function opcity(x){ 30 var timer,sp; 31 clearInterval(timer); 32 timer=setInterval(function(){ 33 if(alpha<x){ 34 sp=10; 35 }else{ 36 sp=-10; 37 } 38 39 if(alpha==x){ 40 clearInterval(timer); 41 42 }else{ 43 alpha+=sp; 44 obox.style.opacity=alpha/100; 45 obox.style.filter="alpha(opacity="+alpha+")"; 46 } 47 48 },20) 49 50 } 51 52 53 54 </script> 55 56 </body> 57 </html>