JS+CSS实现感应鼠标渐变显示DIV层的方法
本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS+CSS实现的感应鼠标渐变显示的DIV层</title> <style> #tip{ position:absolute; left:90px; width:0px; height:0px; color:#FFF; font-size:12px; background-color:#000; border:1pxsolid#DEF; filter:Alpha(Opacity=0); opacity:0; z-index:999; } </style> <scripttype="text/javascript"> <!-- //定义“获得指定dom节点”的函数,因为其重用率高 function$(d){returndocument.getElementById(d);} //控制div逐渐显示 vari=0; functionchange_show(){ varobj=$("tip"); i=i+5;//逐渐显示速度 obj.style.filter="Alpha(Opacity="+i+")";//透明度逐渐变小 obj.style.opacity=i/100;//兼容FireFox if(i>=100){ clearInterval(s); i=0; } } //控制div逐渐消失 varj=100; functionchange_hidden(){ varobj=$("tip"); j=j-5;//逐渐消失速度 obj.style.filter="Alpha(Opacity="+j+")";//透明度逐渐变大 obj.style.opacity=j/100;//兼容FireFox if(j<=0){ clearInterval(h); //obj.style.display="none"; j=100; } } //控制change_show()行为 vars; functionshow(x){ if(s){clearInterval(s);} $("tip").style.display="block"; s=setInterval(change_show,1); } //控制change_hidden()行为 functionhidden(x){ $("tip").innerHTML=""; h=setInterval(change_hidden,1); } //--> </script> </head> <body> <divid="tip"style="background-color:blue;width:48%;height:48%;"onmouseover="show(this);"onmouseout="hidden(this);"> </div> <br/> <br>鼠标滑过这里,div层渐变显示<br><hr>收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。