本文實例講述了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程式設計有所幫助。
