鼠標旁邊的提示信息JS代碼怎么寫

【實例名稱】

鼠標旁邊的提示信息JS代碼

【實例描述】

在大型門戶網站中，為了讓用戶可以全面地了解網站的內容，通常需要簡化很多按鈕，但為了讓用戶可以了解按鈕的用途，當鼠標指向按鈕時，會出現提示信息詳細介紹按鈕的功能。本例介紹如何實現鼠標旁邊的提示信息。

【實例代碼】

 
<script Language="javascript"> 
//內部變量定義
tPopWait=50; 
tPopShow=4000;
showPopStep=15; 
popOpacity=80; 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
//動態顯示提示信息，注意此處定義了樣式和層
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText {  background-color: #F8F8F5;
color:#000000; border: 1px #000000 solid;font-color: 
font-size: 12px; padding-right: 4px; padding-left: 4px; 
height: 20px; padding-top: 2px; padding-bottom: 2px; 
filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:
absolute;z-index:1000;' class='cPopText'></div>"); 
//顯示提示信息的方法
function showPopupText()
{ 
    var o=event.srcElement; 
//獲取鼠標指向的鏈接或按鈕
    MouseX=event.x; 
    MouseY=event.y; 
    if(o.alt!=null && o.alt!="")
    {o.dypop=o.alt;o.alt=""}; 
    if(o.title!=null && o.title!="")
    {o.dypop=o.title;o.title=""}; 
    if(o.dypop!=sPop)
    { 
        sPop=o.dypop;   
//設置提示信息的內容-從控件的title屬性獲得
        clearTimeout(curShow); 
        clearTimeout(tFadeOut); 
        clearTimeout(tFadeIn); 
        clearTimeout(tFadeWaiting); 
        if(sPop==null || sPop=="") 
        { 
            dypopLayer.innerHTML=""; 
            dypopLayer.style.filter="Alpha()"; 
            dypopLayer.filters.Alpha.opacity=0; 
        } 
        else 
        { 
            if(o.dyclass!=null)
            popStyle=o.dyclass  
            else popStyle="cPopText"; 
            curShow=setTimeout("showIt()",tPopWait); 
        } 
   } 
} 
//定義顯示的位置
function showIt()
{ 
    dypopLayer.className=popStyle; 
    dypopLayer.innerHTML=sPop; 
    popWidth=dypopLayer.clientWidth; 
    popHeight=dypopLayer.clientHeight; 
    if(MouseX+12+popWidth>document.body.clientWidth) 
popLeftAdjust=-popWidth-24 
    else popLeftAdjust=0; 
    if(MouseY+12+popHeight>document.body.clientHeight) 
popTopAdjust=-popHeight-24 
    else popTopAdjust=0; 
    dypopLayer.style.left=MouseX+12+document.body.
scrollLeft+popLeftAdjust; 
    dypopLayer.style.top=MouseY+12+document.body.
scrollTop+popTopAdjust; 
    dypopLayer.style.filter="Alpha(Opacity=0)"; 
    fadeOut(); 
} 
//定義顯示或隱藏提示層
function fadeOut()
{ 
    if(dypopLayer.filters.Alpha.opacity<popOpacity)
    { 
        dypopLayer.filters.Alpha.opacity+=showPopStep; 
        tFadeOut=setTimeout("fadeOut()",1); 
    } 
    else
    { 
        dypopLayer.filters.Alpha.opacity=popOpacity; 
        tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
    } 
} 
function fadeIn()
{ 
    if(dypopLayer.filters.Alpha.opacity>0) 
    { 
        dypopLayer.filters.Alpha.opacity -= 1; 
        tFadeIn=setTimeout("fadeIn()",1); 
    } 
} 
document.onmouseover=showPopupText; 
需要在body中添加一個連接，用來調用并實現提示效果，代碼如下所示，注意要指定連接的title屬性，它是提示信息的來源。
<a href="http://www.google.com" title="我最喜愛的搜索">搜索</a>
 

【運行效果】

【難點剖析】

本例中的重點是div層和CSS特效的應用。

【源碼下載】

本實例JS代碼下載