<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #first{ width:200px; height:200px; background: #0F0; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload=function(){ var block=document.getElementById('first'); block.onmouseover=function(){ change(100); } block.onmouseout=function(){ change(30); } }//onload var timer=null; var alpha=30; function change(target){ clearInterval(timer); var block=document.getElementById('first'); var speed=0; setInterval(function(){ if(alpha>target){ speed = -1; }else{ speed = 1; } if(alpha==target){ clearInterval(timer); }else{ alpha+=speed block.style.filter='alpha(opacity:'+alpha+')' ; block.style.opacity=alpha/100; } },30); } </script> </head> <body> <div id="first"></div> </body> </html>
_潇潇暮雨
相关分类