網頁内容Tip效果

54powerman

1 把文末代碼儲存為Title.js;

2 在需要效果的網頁中導入該js檔案，代碼如下：

<SCRIPT LANGUAGE="JavaScript" src="title.js"></SCRIPT>

這樣，網頁中所有有Title屬性的标簽内容，滑鼠over時都會顯示特殊效果。

3 代碼：

var pltsPop=null;

var pltsoffsetX = 10;

var pltsoffsetY = 15;

var pltsPopbg="#ffffee";

var pltsPopfg="#111111";

var pltsTitle="";

document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');

document.write('<style>');

document.write('.header {FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: Tahoma, Verdana;BACKGROUND-COLOR:#006699}');//BACKGROUND-IMAGE: url(altbg.gif);

document.write('.selet_bg { BACKGROUND-COLOR: #ffffff}');

document.write('</style>');

function pltsinits()

{

     document.onmouseover    = plts;

     document.onmousemove = moveToMouseLoc;

}

function plts()

{   var o=event.srcElement;

     if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

     if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

     pltsPop=o.dypop;

     if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")

     {

pltsTipLayer.style.left=-1000;

pltsTipLayer.style.display='';

var Msg=pltsPop.replace(//n/g,"<br>");

Msg=Msg.replace(//0x13/g,"<br>");

var re=//{(.[^/{]*)/}/ig;

if(!re.test(Msg))pltsTitle="Tips";

else{

    re=//{(.[^/{]*)/}(.*)/ig;

      pltsTitle=Msg.replace(re,"$1")+" ";

    re=//{(.[^/{]*)/}/ig;

    Msg=Msg.replace(re,"");

    Msg=Msg.replace("<br>","");}

    var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");

         var content =

        '<table style="FILTER:alpha(opacity=80) shadow(color=#bbbbbb,direction=150);" id=toolTipTalbe border=0><tr><td width="100%"><table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">'+

        '<tr id=pltsPoptop><th height=12 valign=bottom class=header><p id=topleft align=left>↖'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'↗</font></th></tr>'+

        '<tr><td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">'+Msg+'</td></tr>'+

        '<tr id=pltsPopbot style="display:none"><th height=12 valign=bottom class=header><p id=botleft align=left>↙'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'↘</font></th></tr>'+

        '</table></td></tr></table>';

         pltsTipLayer.innerHTML=content;

         toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);

         moveToMouseLoc();

         return true;

        }

     else

      pltsTipLayer.innerHTML='';

        pltsTipLayer.style.display='none';

     }

function moveToMouseLoc()

if(pltsTipLayer.innerHTML=='')return true;

var MouseX=event.x;

var MouseY=event.y;

//window.status=event.y;

var popHeight=pltsTipLayer.clientHeight;

var popWidth=pltsTipLayer.clientWidth;

if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)

     popTopAdjust=-popHeight-pltsoffsetY*1.5;

     pltsPoptop.style.display="none";

     pltsPopbot.style.display="";

   else

      popTopAdjust=0;

     pltsPoptop.style.display="";

     pltsPopbot.style.display="none";

if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)

   popLeftAdjust=-popWidth-pltsoffsetX*2;

   topleft.style.display="none";

   botleft.style.display="none";

   topright.style.display="";

   botright.style.display="";

else

   popLeftAdjust=0;

   topleft.style.display="";

   botleft.style.display="";

   topright.style.display="none";

   botright.style.display="none";

pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;

pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;

    return true;

pltsinits();