给wordpress添加title属性的鼠标气泡悬浮窗

作者:Matrix 被围观: 2,259 次 发布时间:2013-09-26 分类:wordpress建站 兼容并蓄 拷贝型 | 14 条评论 »

NOTICE:这是一个创建于 1172 天前的主题,其中的信息可能已经有所发展或是发生改变。

鼠标停留在有title属性上的时候或有提示,但是默认的样式中有觉得不可观的地方。利用js即可实现修改。

NGRO的效果演示:

NGRO的效果演示

css代码:

  1. #pre_a{background:#000;color:#FFF;text-align:center;margin-top:30px;margin-left:-100px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #333;border:1px dashed #FFF;padding:3px 8px;font-size:12px;border-radius:6px;width:200px;word-wrap:break-word}  

说明:气泡的样式是pre_a的ID。代码来自:奶酪博客

使用步骤:

1.主题header.php中加载js文件jquery.titleQIPAO.js(一定要确保是在JQ库的后面加载

若你的主题已经加载了JQ库请选择下载一。下载一里面的代码很精简,建议使用。

若没有加载JQ库请选择下载二。下载二里面是把JQ1.4.2和此功能的代码打包了,现在JQ库都更新到1.10.2版本了,不建议选择下载二。

下载一、jquery.titleQIPAO.js(精简实用版本):http://pan.baidu.com/s/1gdHHGcF

下载二、jquery.titleQIPAO.js(已经包含JQ库1.4.2版):http://www.400gb.com/file/28916470

jquery.titleQIPAO.js(已经包含JQ库1.4.2版):http://pan.baidu.com/share/link?shareid=3388345783&uk=3238236832

2.在WordPress主题的style.css中添加上面的那段css代码

3.成功。

另效果一:

效果一

代码:

  1. #pre_a{  
  2.     position:absolute;  
  3.     z-index:1000;  
  4.     width:255px;  
  5.     background:#fff;  
  6.     padding:10px;  
  7.     border:1px solid #ccc;  
  8.     -moz-border-radius: 5px;  
  9.     -webkit-border-radius: 5px;  
  10.     border-radius: 5px;  
  11.     -webkit-box-shadow:0px 0px 3px #333;  
  12.     -moz-box-shadow:0px 0px 3px #333;  
  13.     box-shadow:0px 0px 3px #333;  
  14.     text-align:center;  
  15.     }  

浅蓝色,效果二:

效果二

代码:

  1. #pre_a{  
  2.     positionabsolute;  
  3.     color#fff;  
  4.     padding5px;  
  5.     background#8EC1DA;  
  6.     -moz-box-shadow: 0px 0px 5px #8EC1DA;  
  7.     -webkit-box-shadow: 0px 0px 5px #8EC1DA;  
  8.     box-shadow: 0px 0px 5px #8EC1DA;  
  9.     -moz-border-radius: 3px;  
  10.     -webkit-border-radius: 3px;  
  11.     border-radius: 5px;  
  12.     text-aligncenter;  
  13.     text-shadow1px 1px 1px #888888;  
  14.     z-index:1000  
  15. }  

 

更多参考:

使用jQuery UI修饰title属性的气泡悬浮框

本文固定链接:http://www.hhtjim.com/add-the-title-attribute-of-the-mouse-to-wordpress-bubbles-floating-window.html
Matrix
本文章由 Matrix 于2013年09月26日发布在wordpress建站, 兼容并蓄, 拷贝型分类下,目前没有通告,你可以至底部留下评论。
转载请注明:给wordpress添加title属性的鼠标气泡悬浮窗-HHTjim'S 部落格
关键字:, , , ,

有14 条评论 »

  1. jet jet 2015-10-22 20:43:49 +0800#9

    jquery.titleQIPAO.js(精简实用版本):http://www.400gb.com/file/55945858
    文件不存在了,能重新上传一下吗?

    • Matrix Matrix Moderator 2015-10-25 0:15:23 +0800

      http://pan.baidu.com/s/1gdHHGcF

  2. 记忆碎片 记忆碎片 2015-4-16 8:55:25 +0800#8

    jquery.titleQIPAO.js文件加载代码怎么写

    • Matrix Matrix Moderator 2015-4-16 11:44:17 +0800
      1. <script type="text/javascript" src="http://网站/js/jquery.titleQIPAO.js"></script>  
  3. 同盟源 同盟源 2015-2-28 17:26:54 +0800#7

    非常感谢,我的网站已经加上了

  4. 小小张 小小张 2015-1-11 20:44:55 +0800#6

    HHTjim'S 部落格 请问,标题下面的提示,是怎么做到的?效果很棒
    如:去过汉中,练过气功,手拿扇子,还可以扇风.....

    • Matrix Matrix Moderator 2015-1-11 22:31:27 +0800

      一句话功能是按照philna2主题弄的,ajax请求后台的一句话内容然后显示。过些天我写个帖子,放代码

      • 小小张 小小张 2015-1-12 12:24:30 +0800

        好的,期待着。这个评论这里效果也是一样的吧

  5. 辽西seo 辽西seo 2014-6-21 16:14:08 +0800#5

    如坠五里雾中,暂且记下。

  6. 朝阳seo 朝阳seo 2014-5-8 18:53:33 +0800#4

    不大明白,先记下了,这里有这个东东。

  7. sojh sojh 2014-2-27 17:22:49 +0800#3

    感谢!这个效果我找了好久_(:з」∠)_

  8. 手机小菜 手机小菜 2014-1-28 22:10:19 +0800#2

    学习了,看到很多博客都有,现在知道了

  9. 逗妇乳 逗妇乳 2014-1-28 19:48:36 +0800#1

    马上收下,是所有博客程序通用的吧

    • Matrix Matrix Moderator 2014-1-28 19:57:17 +0800

      通用的。主要加载JQ

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!