<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>透明度</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #div1{width:200px;height:200px;background: red;filter:alpha(opacity:30);opacity: 0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ movestar(100); } oDiv.onmouseout=function(){ movestar(30); } } var timer=null; var alpha=30; function movestar(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha<iTarget){ speed=10; }else{ speed=-10; } if(alpha==iTarget){ clearInterval(timer); }else{ alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>