标签:web前端 javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style> #dd{ width:200px; height:200px; background:red; opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('dd'); var oBtn=document.getElementById('btn'); var timer=null; var old=0.3; var speed; var speedValue=0.2; function startMove(){ old+=speed; if(old<=1&&old>=0.3) { oDiv.style.opacity=old; } else { if(old>1) { old=1; oDiv.style.opacity=1; } else { old=0.3; oDiv.style.opacity=0.3; } clearInterval(timer); } } oDiv.onmouseover=function(){ clearInterval(timer); speed=speedValue; timer=setInterval(startMove,100); }; oDiv.onmouseout=function(){ clearInterval(timer); speed=-speedValue; timer=setInterval(startMove,100); }; }; </script> </head> <body> <div id="dd"></div> </body> </html>
注意事项:
opactiy是firfox浏览器中的透明度设置,IE中是 filter:alpha(opactiy=30);
运行结果图:
标签:web前端 javascript
原文地址:http://blog.csdn.net/u012193330/article/details/41348019