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

无界

多格下效果：

下載 (27.82 KB)

2014-1-12 13:11

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

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

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

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

複製代碼

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


背景图片：

下載 (32.63 KB)

2014-1-12 13:20

代码内容：

1. var sPop = null;
   
2. var pltsoffsetX = 10;
   
3. var pltsoffsetY = 15;
   
4. 
   
5. document.write('\
   
6.         <style type="text/css"> \
   
7.         #popLayer { \
   
8.                 position:absolute; \
   
9.                 Z-INDEX: 1000; \
   
10.                 text-align : left; \
    
11.                 white-space: nowrap; \
    
12.                 font-family: 浪漫雅圆,微软雅黑,Tahoma, Verdana; \
    
13.                 visibility: hidden; \
    
14.                 border-radius: 8px; \
    
15.                 background: url(背景图片地址) no-repeat; \
    
16.         background-color:#80C8FF; \
    
17.         } \
    
18.         </style> \
    
19.         <div id="popLayer" class="popupmenu_popup" nowrap></div> \
    
20. ');
    
21. 
    
22. function showPopupText(event) {
    
23.         try {
    
24.                 o = event.srcElement ? event.srcElement : event.target;
    
25.                 if (o.alt != null && o.alt != '') { o.pop = o.alt; o.alt = ''; }
    
26.                 if (o.title != null && o.title != '') { o.pop = o.title; o.title = ''; }
    
27.                 if (o.pop != sPop) {
    
28.                         sPop = o.pop;
    
29.                         if (sPop == null || sPop == '') {
    
30.                                 $('popLayer').style.visibility = 'hidden';
    
31.                                 $('popLayer').innerHTML = '';
    
32.                         } else {
    
33.                                 $('popLayer').style.visibility = 'visible';
    
34.                                 $('popLayer').innerHTML = sPop.replace(/<(.*)>/g, "&lt;$1&gt;").replace(/\n/g, '<br />');
    
35.                                 moveToMouseLoc(event);
    
36.                         }
    
37.                 }
    
38.         } catch (e) {
    
39.                 return true;
    
40.         }
    
41. }
    
42. 
    
43. function moveToMouseLoc(event){
    
44.         try {
    
45.                 if ($('popLayer').innerHTML == '') return true;
    
46.                 var MouseX = event.clientX;
    
47.                 var MouseY = event.clientY;
    
48.                 var popHeight = $('popLayer').offsetHeight;
    
49.                 var popWidth = $('popLayer').offsetWidth;
    
50.                 if (MouseY + pltsoffsetY + popHeight > document.documentElement.clientHeight - 10) {
    
51.                         popTopAdjust =- popHeight - pltsoffsetY * 1.5;
    
52.                 } else {
    
53.                         popTopAdjust = 0;
    
54.                 }
    
55.                 if (MouseX + pltsoffsetX + popWidth > document.documentElement.clientWidth - 10) {
    
56.                         popLeftAdjust =- popWidth - pltsoffsetX * 2;
    
57.                 } else {
    
58.                         popLeftAdjust = 0;
    
59.                 }
    
60.                 var pleft = MouseX + pltsoffsetX + document.documentElement.scrollLeft + popLeftAdjust;
    
61.                 var ptop = MouseY + pltsoffsetY + document.documentElement.scrollTop + popTopAdjust;
    
62.                 $('popLayer').style.left = (pleft > 5 ? pleft : 5) + 'px';
    
63.                 $('popLayer').style.top = (ptop > 5 ? ptop : 5) + 'px';
    
64.                   return true;
    
65.         } catch (e) {
    
66.                 return true;
    
67.         }
    
68. }
    
69. 
    
70. if (!document.onmouseover) {
    
71.         document.onmouseover = function(e) {
    
72.                 !e ? showPopupText(window.event) : showPopupText(e);
    
73.         };
    
74. }

複製代碼

superman1024

感謝分享

章鱼

.....你不觉得应该把图片存到免空之类的地方么,不然别人没法用

情蕭

感谢分享~~~~

1. "http://tlb.258club.com/templates/default/showpop.htm"

複製代碼

代码的这个部分，需要把前面的网址部分改成自己的网址吗？
-------------------------------

图片还是存到自己的外链相册最保险 - -

而且给出图片也只是做个例子，会员其实可以根据尺寸，自己做一个喜欢的背景图片替换进去就好
如果我用的话，我个人喜欢古风的，为了统一论坛整体风格，极可能是做一个古风的背景放进去。。。

无界

感谢分享~~~~代码的这个部分，需要把前面的网址部分给成自己的网址吗？
-------------------------------

...
情蕭 發表於 2014-1-12 14:57

    非常赞同，个人喜好不同，大家可以根据自己论坛特点替换背景和背景色。如果新建.htm，前面那个地址要换成自己的，或者省略。

章鱼

回復 4# 情蕭


   
JS可以直接放在第三方,就是

1. <script>
   
2. 文件内容
   
3. </script>

複製代碼

不过在获取别人的JS的内容的时候要注意不能修改其中的版权部分(不过这里没有版权部分所以问题不大)