<!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> div{200px; height:200px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload=function() { var aDiv=document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++) { aDiv[i].timer; aDiv[i].alpha=30; aDiv[i].onmouseover=function() { onmove(this,100); } aDiv[i].onmouseout=function() { onmove(this,30); } } } function onmove(obj,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function() { var speed=(iTarget-obj.alpha)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.alpha==iTarget) { clearInterval(obj.timer); } else { obj.alpha+=speed; obj.style.filter='alpha(opactiy:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>