2012-10-24 来源:网络
【实例名称】
鼠标旁边的提示信息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特效的应用。
【源码下载】