在Web中经常碰到链接提示文字效果,就是当鼠标经过URL链接时,立刻弹出一个提示层(DIV),提示链接内容等等相关文字.虽然知道是用隐藏DIV实现的,不过一直不知道怎么弄.昨天搜到一个JS文件,可以轻松搞定.帖出来,收藏一下. JS文件代码如下(mouse_on_title.js):
<!-- //***********默认设置定义.********************* tPopWait=50; //停留tWait豪秒后显示提示。 tPopShow=6000; //显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=95; fontcolor="#000000"; bgcolor="#EDEDED"; bordercolor="#007db5";
//***************内部变量定义***************** sPop=null;curShow=null;tFadeOut=null;tFadeIn=null;tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>"); document.write(".cPopText { background-color: " + bgcolor + ";color:" + fontcolor + "; border: 1px " + bordercolor + " 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; 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; -->
应用的时候,在页面的<head></head>之间加入: <SCRIPT language=javascript src="mouse_on_title.js"></SCRIPT>
在需要提示层的链接中加入title属性,比如: //<a href=”目标” title=”提示文字内容”>测试</a> 其实如果不加上述JS文件,提示层效果也是可以出来的.就是速度比较慢,提示层效果比较单调而已. 实际效果如下:
 
|