/***********************************************
　　一個(gè)JavaScript Title、alt提示（Tips）源碼解讀
代碼注釋?zhuān)禾茋?guó)輝
作者博客：http://webflash.cnblogs.com
***********************************************/

//定義getElementById快捷方式
function $(obj)
{
if(typeof(obj)=='object')
{
return obj;
}
else
{
return document.getElementById(obj);
}
}
//定義document.write快捷方式,代替復(fù)雜的DOM操作
function $P(str)
{
document.write(str);
}
//腳本錯(cuò)誤屏蔽
window.onerror=function ()
{
return true;
};
/*
定義變量：
pltsPop（提示內(nèi)容文字，來(lái)自對(duì)象的alt或title屬性，不包含HTML）
toolTip（提示內(nèi)容DOM對(duì)象，即后面定義的content變量）
pltsPoptop（上方提示標(biāo)題DOM對(duì)象）
pltsPopbot（下方提示標(biāo)題DOM對(duì)象）
topLeft（左上角提示標(biāo)題DOM對(duì)象）
botLeft（左下方提示標(biāo)題DOM對(duì)象）
topRight（右上角提示標(biāo)題DOM對(duì)象）
botRight（右下方提示標(biāo)題DOM對(duì)象）
*/
var pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight;
//設(shè)置提示窗口相對(duì)提示對(duì)象的位置偏移量
var pltsoffsetX=10;
var pltsoffsetY=15;
var pltsTitle="";
//創(chuàng)建一個(gè)絕對(duì)定位的隱藏圖層
$P('<div id=\"pltsTipLayer\" style="display:none; position:absolute; z-index:10001" mce_style="display:none; position:absolute; z-index:10001"></div>');
//把剛創(chuàng)建的層對(duì)象賦值給一個(gè)變量，此語(yǔ)句一定要出現(xiàn)在層創(chuàng)建之后
var pltsTipLayer=$('pltsTipLayer');
//定義鼠標(biāo)移到對(duì)象上時(shí)處理函數(shù)，主要提取alt或title屬性值，并初始化提示框HTML及樣式
function PltsMouseOver(ev)
{
//兼容不同瀏覽器的事件和對(duì)象獲取
var Event=window.event||ev;
var o=Event.srcElement||Event.target;
//如果對(duì)象alt屬性存在并且不等于空，就把它的值存到dypop屬性，并清空當(dāng)前alt內(nèi)容
if(o.alt!=null&&o.alt!="")
{
o.dypop=o.alt;
o.alt="";
}
//如上，對(duì)具有title屬性的對(duì)象作同樣的判斷和處理，清空title屬性值是讓對(duì)象默認(rèn)的提示效果失效
if(o.title!=null&&o.title!="")
{
o.dypop=o.title;
o.title="";
}
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
//把上面創(chuàng)建的提示層顯示出來(lái)，暫時(shí)移到左邊很遠(yuǎn)，雖然顯示但用戶看不到
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
/*
格式化提示信息，把其中的\n換成<br/>，比如像下面這樣定義title值，顯示出來(lái)會(huì)是作者和性別各一行，因?yàn)門(mén)om和Sex之間有\(zhòng)n：
<div title="Author:Tom
Sex:male">Article title...</div>
*/
var Msg=pltsPop.replace(/\n/g,"<br/>");
Msg=Msg.replace(/\0x13/g,"<br/>");
//定義正則表達(dá)式檢查提示內(nèi)容是否含有類(lèi)似這樣的內(nèi)容“{提示標(biāo)題}”,而且{}和{{}是排除在處的，如果沒(méi)有就默認(rèn)用“簡(jiǎn)介”作為提示標(biāo)題
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))
{
pltsTitle="<label style="\" mce_style="\""color:#000\">簡(jiǎn)介</label>";
}
else
{
re=/\{(.[^\{]*)\}(.*)/ig;
//提取{}中的內(nèi)容
pltsTitle=Msg.replace(re,"$1")+" ";
//把{內(nèi)容}，包括{}在內(nèi)的內(nèi)容替換為空，得到最終提示正文的內(nèi)容
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
}
//定義提示框內(nèi)容Html與Style，并把獲得的相關(guān)內(nèi)容放到對(duì)應(yīng)變量中
var content="<dl id=\"toolTip\" style="\" mce_style="\""-moz-opacity:0.85;opacity:0.85;FILTER:alpha(opacity=85);padding:2px;background:#fff;\"><dd id=\"pltsPoptop\" class=\"toolTipTitle\" style="\" mce_style="\""line-height:20px;\"><p id=\"topLeft\" class=\"left\"><b><label style="\" mce_style="\""color:#ffffff\">↖</label>"+pltsTitle+"</b></p><p id=\"topRight\" class=\"right\" style="\" mce_style="\""display:none\"><b>"+pltsTitle+"<label style="\" mce_style="\""color:#ffffff\">↗</label ></b></p></dd><dd class=\"toolTipMsg\">"+Msg+"</dd><dd id=\"pltsPopbot\" style="\" mce_style="\""display:none\" class=\"toolTipTitle\"><p id=\"botLeft\" class=\"left\"><b><label style="\" mce_style="\""color:#ffffff\">↙</label >"+pltsTitle+"</b></p><p id=\"botRight\" class=\"right\" style="\" mce_style="\""display:none\"><b>"+pltsTitle+"<label style="\" mce_style="\""color:#ffffff\">↘</label></b></p></dd></dl>";
pltsTipLayer.innerHTML=content;
toolTip=$("toolTip");
pltsPoptop=$("pltsPoptop");
pltsPopbot=$("pltsPopbot");
topLeft=$("topLeft");
botLeft=$("botLeft");
topRight=$("topRight");
botRight=$("botRight");
//設(shè)置提示框?qū)挾?，它的大小是提示框自身大小和瀏覽器可見(jiàn)窗口大小一半兩者中的最小值，即在瀏覽器窗口小過(guò)提示框本身寬度后，會(huì)自動(dòng)調(diào)整提示框大小到一個(gè)新的寬度
toolTip.style.width=Math.min(pltsTipLayer.clientWidth,document.documentElement.clientWidth/2.2)+"px";
}
else
{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
}
}
//定義鼠標(biāo)在對(duì)象上移動(dòng)時(shí)處理函數(shù)，每移動(dòng)一像素觸發(fā)一次事件
function PltsMouseMove(ev)
{
if(pltsTipLayer.innerHTML=='')
return true;
var Event=window.event||ev;
//獲取光標(biāo)當(dāng)前X、Y坐標(biāo)
var MouseX=Event.clientX;
var MouseY=Event.clientY;
//獲取提示框?qū)捀叨?
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
//如果當(dāng)前光標(biāo)Y坐標(biāo)+提示框Y軸偏移量+提示框高度>當(dāng)前窗口可見(jiàn)高度，一般處理窗口中下方要提示的對(duì)象，比如頁(yè)腳有一個(gè)鏈接需要提示時(shí)就會(huì)是這種情況，此時(shí)考慮使用下方標(biāo)題
if(MouseY+pltsoffsetY+popHeight>document.documentElement.clientHeight)
{
//提示框顯示在要提示對(duì)象上方時(shí)需要一個(gè)額外值popTopAdjust作為提示框最終定位的依據(jù)
popTopAdjust=-popHeight-pltsoffsetY*1.5;
pltsPoptop.style.display="none";
pltsPopbot.style.display="";
}
else
{
popTopAdjust=0;
pltsPoptop.style.display="";
pltsPopbot.style.display="none";
}
//判斷使用左標(biāo)題還是右標(biāo)題
if(MouseX+pltsoffsetX+popWidth>document.documentElement.clientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2;
topLeft.style.display="none";
botLeft.style.display="none";
//下面兩個(gè)標(biāo)題都顯示，其實(shí)最終看到的只有一個(gè)位置上的標(biāo)題，因?yàn)閠opRight是pltsPoptop的子元素，如果pltsPoptop不顯示，topRight顯示也是看不到的，botLeft同理
topRight.style.display="";
botRight.style.display="";
}
else
{
popLeftAdjust=0;
topLeft.style.display="";
botLeft.style.display="";
topRight.style.display="none";
botRight.style.display="none";
}
//把綜合處理得到的提示框最終位置值設(shè)置到對(duì)象，其中scrollTop是網(wǎng)頁(yè)被卷去的高度，因?yàn)閟tyle.top是相對(duì)整個(gè)文檔的而不是瀏覽器窗口，所以要算上滾動(dòng)隱藏的高度，scrollLeft同理
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.documentElement.scrollLeft+popLeftAdjust+"px";
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.documentElement.scrollTop+popTopAdjust+"px";
return true;
}
//定義事件綁定函數(shù)
function PltsInit()
{
document.onmouseover=PltsMouseOver;
document.onmousemove=PltsMouseMove;
}
//調(diào)用事件綁定函數(shù)
PltsInit();