免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

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

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

多格下效果:
dg.jpg
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/


背景图片:
pop.png
2014-1-12 13:20



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

  4. document.write('\
  5.         <style type="text/css"> \
  6.         #popLayer { \
  7.                 position:absolute; \
  8.                 Z-INDEX: 1000; \
  9.                 text-align : left; \
  10.                 white-space: nowrap; \
  11.                 font-family: 浪漫雅圆,微软雅黑,Tahoma, Verdana; \
  12.                 visibility: hidden; \
  13.                 border-radius: 8px; \
  14.                 background: url(背景图片地址) no-repeat; \
  15.         background-color:#80C8FF; \
  16.         } \
  17.         </style> \
  18.         <div id="popLayer" class="popupmenu_popup" nowrap></div> \
  19. ');

  20. function showPopupText(event) {
  21.         try {
  22.                 o = event.srcElement ? event.srcElement : event.target;
  23.                 if (o.alt != null && o.alt != '') { o.pop = o.alt; o.alt = ''; }
  24.                 if (o.title != null && o.title != '') { o.pop = o.title; o.title = ''; }
  25.                 if (o.pop != sPop) {
  26.                         sPop = o.pop;
  27.                         if (sPop == null || sPop == '') {
  28.                                 $('popLayer').style.visibility = 'hidden';
  29.                                 $('popLayer').innerHTML = '';
  30.                         } else {
  31.                                 $('popLayer').style.visibility = 'visible';
  32.                                 $('popLayer').innerHTML = sPop.replace(/<(.*)>/g, "&lt;$1&gt;").replace(/\n/g, '<br />');
  33.                                 moveToMouseLoc(event);
  34.                         }
  35.                 }
  36.         } catch (e) {
  37.                 return true;
  38.         }
  39. }

  40. function moveToMouseLoc(event){
  41.         try {
  42.                 if ($('popLayer').innerHTML == '') return true;
  43.                 var MouseX = event.clientX;
  44.                 var MouseY = event.clientY;
  45.                 var popHeight = $('popLayer').offsetHeight;
  46.                 var popWidth = $('popLayer').offsetWidth;
  47.                 if (MouseY + pltsoffsetY + popHeight > document.documentElement.clientHeight - 10) {
  48.                         popTopAdjust =- popHeight - pltsoffsetY * 1.5;
  49.                 } else {
  50.                         popTopAdjust = 0;
  51.                 }
  52.                 if (MouseX + pltsoffsetX + popWidth > document.documentElement.clientWidth - 10) {
  53.                         popLeftAdjust =- popWidth - pltsoffsetX * 2;
  54.                 } else {
  55.                         popLeftAdjust = 0;
  56.                 }
  57.                 var pleft = MouseX + pltsoffsetX + document.documentElement.scrollLeft + popLeftAdjust;
  58.                 var ptop = MouseY + pltsoffsetY + document.documentElement.scrollTop + popTopAdjust;
  59.                 $('popLayer').style.left = (pleft > 5 ? pleft : 5) + 'px';
  60.                 $('popLayer').style.top = (ptop > 5 ? ptop : 5) + 'px';
  61.                   return true;
  62.         } catch (e) {
  63.                 return true;
  64.         }
  65. }

  66. if (!document.onmouseover) {
  67.         document.onmouseover = function(e) {
  68.                 !e ? showPopupText(window.event) : showPopupText(e);
  69.         };
  70. }
複製代碼
2

評分人數

感謝分享

TOP

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

TOP

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

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

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

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

TOP

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

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



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

TOP

回復 4# 情蕭


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

TOP

返回列表