免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 美化标题标签，N格多格通用。 [打印本頁]
作者: 无界    時間: 2014-1-12 13:17     標題: 美化标题标签，N格多格通用。

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

多格下效果：
dg.jpg

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/


背景图片： pop.png


代码内容：
  1. var sPop = null;
  2. var pltsoffsetX = 10;
  3. var pltsoffsetY = 15;

  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. ');

  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. }

  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. }

  70. if (!document.onmouseover) {
  71.         document.onmouseover = function(e) {
  72.                 !e ? showPopupText(window.event) : showPopupText(e);
  73.         };
  74. }
複製代碼


圖片附件: dg.jpg (2014-1-12 13:11, 27.82 KB) / 下載次數 2030
http://weclub.info/discuz/attachment.php?aid=26413&k=ae05eead939967a0a6dc53f15a78b836&t=1732394413&sid=p5zMgl



圖片附件: pop.png (2014-1-12 13:20, 32.63 KB) / 下載次數 1998
http://weclub.info/discuz/attachment.php?aid=26414&k=d0c119d12de4102a2d33269563747337&t=1732394413&sid=p5zMgl

作者: superman1024    時間: 2014-1-12 13:23

感謝分享
作者: 章鱼    時間: 2014-1-12 13:25

.....你不觉得应该把图片存到免空之类的地方么,不然别人没法用
作者: 情蕭    時間: 2014-1-12 14:57

本帖最後由 情蕭 於 2014-1-12 15:00 編輯

感谢分享~~~~
  1. "http://tlb.258club.com/templates/default/showpop.htm"
複製代碼
代码的这个部分，需要把前面的网址部分改成自己的网址吗？
-------------------------------

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

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

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

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



    非常赞同，个人喜好不同，大家可以根据自己论坛特点替换背景和背景色。如果新建.htm，前面那个地址要换成自己的，或者省略。
作者: 章鱼    時間: 2014-1-12 16:54

回復 4# 情蕭


   
JS可以直接放在第三方,就是
  1. <script>
  2. 文件内容
  3. </script>
複製代碼
不过在获取别人的JS的内容的时候要注意不能修改其中的版权部分(不过这里没有版权部分所以问题不大)



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://weclub.info/discuz/) Powered by Discuz! 7.2