[分享] 美化标题标签，N格多格通用。

本帖最後由无界於 2014-1-12 13:43 編輯

多格下效果：

PS：在xshow的title.js基础上加背景和圆角及背景色。

标签文字颜色受风格页脚文字色影响，大家也可以拷贝showpop.htm内容放到自己论坛进行背景及底色修改。

修改方法：将下边代码放在第三方即可。

<script type="text/javascript" src="http://tlb.258club.com/templates/default/showpop.htm"></script>

複製代碼

预览地址：http://tlb.258club.com/

背景图片：

代码内容：

var sPop = null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
document.write('\
<style type="text/css"> \
#popLayer { \
position:absolute; \
Z-INDEX: 1000; \
text-align : left; \
white-space: nowrap; \
font-family: 浪漫雅圆,微软雅黑,Tahoma, Verdana; \
visibility: hidden; \
border-radius: 8px; \
background: url(背景图片地址) no-repeat; \
background-color:#80C8FF; \
} \
</style> \
<div id="popLayer" class="popupmenu_popup" nowrap></div> \
');
function showPopupText(event) {
try {
o = event.srcElement ? event.srcElement : event.target;
if (o.alt != null && o.alt != '') { o.pop = o.alt; o.alt = ''; }
if (o.title != null && o.title != '') { o.pop = o.title; o.title = ''; }
if (o.pop != sPop) {
sPop = o.pop;
if (sPop == null || sPop == '') {
$('popLayer').style.visibility = 'hidden';
$('popLayer').innerHTML = '';
} else {
$('popLayer').style.visibility = 'visible';
$('popLayer').innerHTML = sPop.replace(/<(.*)>/g, "<$1>").replace(/\n/g, '<br />');
moveToMouseLoc(event);
}
}
} catch (e) {
return true;
}
}
function moveToMouseLoc(event){
try {
if ($('popLayer').innerHTML == '') return true;
var MouseX = event.clientX;
var MouseY = event.clientY;
var popHeight = $('popLayer').offsetHeight;
var popWidth = $('popLayer').offsetWidth;
if (MouseY + pltsoffsetY + popHeight > document.documentElement.clientHeight - 10) {
popTopAdjust =- popHeight - pltsoffsetY * 1.5;
} else {
popTopAdjust = 0;
}
if (MouseX + pltsoffsetX + popWidth > document.documentElement.clientWidth - 10) {
popLeftAdjust =- popWidth - pltsoffsetX * 2;
} else {
popLeftAdjust = 0;
}
var pleft = MouseX + pltsoffsetX + document.documentElement.scrollLeft + popLeftAdjust;
var ptop = MouseY + pltsoffsetY + document.documentElement.scrollTop + popTopAdjust;
$('popLayer').style.left = (pleft > 5 ? pleft : 5) + 'px';
$('popLayer').style.top = (ptop > 5 ? ptop : 5) + 'px';
return true;
} catch (e) {
return true;
}
}
if (!document.onmouseover) {
document.onmouseover = function(e) {
!e ? showPopupText(window.event) : showPopupText(e);
};
}