Javascript_多个对象相同运动(图片的淡入淡出)_运动框架
<!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><font face="Verdana, Geneva, sans-serif"></font> <style type="text/css"> div{width:200px;height:200px;background:red;margin:10px;float:left;filter:alpha(opacity:30);opacity:0.3;} </style> <script type="text/javascript"> window.onload=function() { oDiv=document.getElementsByTagName("div"); for(var i=0;i<oDiv.length;i++) { oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ Move(this,100); } oDiv[i].onmouseout=function(){ Move(this,30); } } } function Move(obj,itarget) { clearInterval(obj.timer); obj.timer=setInterval(function(){ speed=(itarget-obj.alpha)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.alpha==itarget) { clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.opacity=(obj.alpha)/100; obj.style.filter="alpha(opacity:"+obj.alpha+")"; } },30) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>