本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: JS+CSS实现的感应鼠标渐变显示的DIV层 <br /> #tip{<br /> position:absolute;<br /> left:90px;<br /> width:0px;<br /> height:0px;<br /> color:#FFF;<br /> font-size:12px;<br /> background-color:#000;<br /> border:1px solid #DEF;<br /> filter:Alpha(Opacity=0);<br /> opacity:0;<br /> z-index:999;<br /> }<br /> <br /> <!--<br /> //定义“获得指定dom节点”的函数，因为其重用率高<br /> function $(d){return document.getElementById(d);}<br /> //控制div逐渐显示<br /> var i = 0;<br /> function change_show(){<br /> var obj = $("tip");<br /> i=i+5; //逐渐显示速度<br /> obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小<br /> obj.style.opacity = i/100; //兼容FireFox<br /> if(i>=100){<br /> clearInterval(s);<br /> i=0;<br /> }<br /> }<br /> //控制div逐渐消失<br /> var j = 100;<br /> function change_hidden(){<br /> var obj = $("tip");<br /> j=j-5; //逐渐消失速度<br /> obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大<br /> obj.style.opacity = j/100; //兼容FireFox<br /> if(j<=0){<br /> clearInterval(h);<br /> //obj.style.display="none";<br /> j=100;<br /> }<br /> }<br /> //控制change_show()行为<br /> var s;<br /> function show(x){<br /> if(s){clearInterval(s);}<br /> $("tip").style.display="block";<br /> s = setInterval(change_show,1);<br /> }<br /> //控制change_hidden()行为<br /> function hidden(x){<br /> $("tip").innerHTML="";<br /> h = setInterval(change_hidden,1);<br /> }<br /> //--><br /> 鼠标滑过这里，div层渐变显示 收集于互联网，只为兴趣与学习交流，不作商业用途。 希望本文所述对大家的javascript程序设计有所帮助。
