<!DOCTYPE html> <head> <title>untitled</title> <meta charset="utf-8" /> <style>*{margin:0;padding:0;} #odiv{ width:300px; height:200px; background-color:#CD3278; opacity:0.3; filter:alpha(opacity:30); }</style> <script>window.οnlοad=function(){ var odiv=document.getElementById("odiv"); odiv.οnmοuseοver=function(){ change(100);//鼠标移入时透明度变为100 } odiv.οnmοuseοut=function(){ change(30);//鼠标移出时透明度变为30 } } var timer=null; var alpha=30; function change(target){ var odiv=document.getElementById("odiv"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-5; } else{ speed=5; } if(alpha==target){ clearInterval(timer); } else{ alpha+=speed; odiv.style.filter='alpha(opacity:'+alpha+')'; odiv.style.opacity=alpha/100; } },50) }</script> </head> <body> <div id="odiv"></div> </body>