wordpress笔记之链接提示美化

2011-09-27 约 10 分钟读完搬砖秘籍

wordpress中美化链接提示或许大多数人没有做过，其实个人还是比较喜欢这个效果，不过由于跟现在所用的主题严重不符合，所以就放弃了，但是作为一个很好技巧，还是在这里记录一下。

jq代码：

var tooltips_h1,
    tooltips_h2,
    tooltips_top,
    tooltips_w1,
    tooltips_w2,
    tooltips_left;
    function calc_pos(e) {
        if ($('#tooltip').length > 0) {
            tooltips_h1 = parseInt(document.documentElement.clientHeight + document.documentElement.scrollTop);
            tooltips_h2 = parseInt($('#tooltip').get(0).offsetHeight + parseInt(e.pageY + 20));
            tooltips_top = (tooltips_h1 < tooltips_h2) ? parseInt(parseInt(e.pageY + 20) - ($('#tooltip').get(0).offsetHeight + 10)) : parseInt(e.pageY + 20);
            tooltips_w1 = parseInt(document.documentElement.clientWidth + document.documentElement.scrollLeft);
            tooltips_w2 = parseInt($('#tooltip').get(0).offsetWidth + parseInt(e.pageX + 10));
            tooltips_left = (tooltips_w1 < tooltips_w2) ? parseInt(parseInt(e.pageX + 10) - ($('#tooltip').get(0).offsetWidth + 10)) : parseInt(e.pageX + 10);
        }
    }
    $('a').mouseover(function(e) {
        this.myTitle = this.title;
        this.myHref = this.href;
        this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0, 30) + "...": this.myHref);
        this.title = "";
        var tooltip = "

";
        $('body').append(tooltip);
        calc_pos(e);
        $('#tooltip').css({
            "opacity": "0.8",
            "top": tooltips_top + "px",
            "left": tooltips_left + "px"
        }).show(600); //注意这个地方...这个就是动画效果
    }).mouseout(function() {
        this.title = this.myTitle;
        $('#tooltip').remove();
    }).mousemove(function(e) {
        calc_pos(e);
        $('#tooltip').css({
            "top": tooltips_top + "px",
            "left": tooltips_left + "px"
        });
    });

css代码:

#tooltip{position:absolute;z-index:100000;max-width:250px;word-wrap:break-word;background:#ECDAF2;text-align:left;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:3px 3px 5px #666;-webkit-box-shadow:3px 3px 5px #666;box-shadow:3px 3px 5px #666;padding:5px; display:none; }
#tooltip p{color:#555;font:12px 'Microsoft YaHei',Arial,Tahoma,Sans-Serif;}
#tooltip p em{display:block;margin-top:3px;color:#9C66E8;font-style:normal;}

好了这个就实现了,具体效果请看:这里,当然这个方法也是转载自这里.

折腾笔记系列：

56 条评论

志慧 2011-09-27 14:23

这样感觉总有个东西跟着鼠标特烦~🤭
1. Sailor 博主 2011-10-20 03:19
  
  恩，我也是这么感觉，于是并没有用，只是做了一个记录，或许有人会用到
阿疯 2011-09-27 14:37

额，我看见那个漂浮的比较烦。想关都关不掉，还来回飘动。真晕。
还有你介绍添加的效果都会让加载速度变慢
1. 蓝色离子 2011-09-29 19:40
  
  支持！
2. Sailor 博主 2011-10-20 03:21
  
  的确是这样的，我没有什么基础，只是从网上搜索的教程，所以就造成了现在的问题，也谢谢你的提醒
3. Sailor 博主回复 @蓝色离子 2011-10-20 03:21
  
  还希望离子多多指教
C度空间 2011-09-27 15:09

正想修改一下我用主题...你的一些文章可能派得上用场！
1. Sailor 博主 2011-10-20 03:22
  
  呵呵，那就算不枉我的初衷吧，希望能够帮到更多的人
Arvixe 2011-09-27 15:56

博主的网站做的不错呀。我很喜欢这样的主题
1. Sailor 博主 2011-10-20 03:22
  
  谢谢夸奖，谢谢，谢谢😄
DH 2011-09-27 16:34

mark
1. Sailor 博主 2011-10-20 03:22
  
  额，我倒是mark了你很多ajax的文章啊🤭🤭
MurphyL 2011-09-27 22:10

嘿嘿～～折腾了哈～～
1. Sailor 博主 2011-10-20 03:23
  
  生命不息，折腾不止~
三人帮 2011-09-28 23:48

你打网球嘛？那个小男孩说去打网球了
1. Sailor 博主 2011-10-20 03:23
  
  不打，这个小孩子是网球王子里面的~
walfred 2011-09-29 09:56

友链已经添加
1. Sailor 博主 2011-10-20 03:23
  
  谢谢~😄
雨帆 2011-09-29 12:38

看不大懂的说 =。=
1. Sailor 博主 2011-10-20 03:24
  
  你又装了~~~
2. 雨帆回复 @Sailor 2011-10-20 15:40
  
  真的看不懂的说哦😭我哭哭哭。
3. Sailor 博主回复 @雨帆 2011-10-21 13:22
  
  哎呀，都是学软件的，这点东西怎么可能难得了你
su 2011-09-30 12:20

呵呵主题不错啊喜欢那个小人啊
1. Sailor 博主 2011-10-20 03:24
  
  现在大家对这个小人褒贬不一啊😓
netyang 2011-09-30 15:33

看到拿福能的广告真的感觉拿福能好无能~
1. Sailor 博主 2011-10-20 03:25
  
  额，就当是博客的一个点缀吧~
仰肖 2011-10-01 12:10

效果在哪，没看明白。
1. Sailor 博主 2011-10-20 03:25
  
  这个效果没有用到我的博客里面，只是记录一下
土木坛子 2011-10-01 15:44

我的博客什么效果都没有，可能是我喜欢简洁吧。
1. Sailor 博主 2011-10-20 03:26
  
  恩，很喜欢你那种简洁的风格，这个主题用厌了，我也就回归简洁路线了
2. TumuTanzi 回复 @Sailor 2011-10-20 05:30
  
  所谓审美美劳？
3. Sailor 博主回复 @TumuTanzi 2011-10-20 08:28
  
  本来就是简洁控，只是这个看着舒服而已
netyang 2011-10-02 12:12

都没有ZBLOG啊！！！😭😭😭😭
1. Sailor 博主 2011-10-20 03:26
  
  额，其实原理是一样的，触类旁通嘛
罗伊 2011-10-03 11:57

觉得这个功能很鸡肋，读者为什么要知道这个链接是干嘛的，为什么要知道这个链接链向哪里？一般的读者根本不会想这些。
1. Sailor 博主 2011-10-20 03:27
  
  的确是这样的，所以我没有用这个效果，只是记录一下
本事不少 2011-10-05 20:32

绿绿的，挺不错的，这模版~~ 😄
1. Sailor 博主 2011-10-20 03:27
  
  呵呵，谢谢夸奖~~~
寒意 2011-10-09 13:15

最近都没怎么更新，你还真是能折腾的~😓
1. Sailor 博主 2011-10-20 03:27
  
  马上就是新一轮的更新热潮了
walfred 2011-10-10 09:24

一直是在搞wordpress阿，估计不久你就成wp达人了
1. Sailor 博主 2011-10-20 03:28
  
  额，不怎么搞了，准备学习一下相关web代码了
雨丸 2011-10-11 14:25

真没有看到效果啊~~~
不过爱折腾才是人生啊~~哈哈😄
1. Sailor 博主 2011-10-20 03:28
  
  呵呵，我感觉这个效果影响用户体验，就去掉了~
幸运随行 2011-10-12 12:21

哇！技术控啊！哈哈支持支持😄
1. Sailor 博主 2011-10-20 03:29
  
  谢谢支持，谢谢谢谢😄😄
乱了感觉 2011-10-16 00:01

感觉用处不大，不太习惯这个
1. Sailor 博主 2011-10-20 03:29
  
  我也感觉几乎没有多大用处，所以就记录了一下而已~
无冷 2011-10-20 10:23

代码还挺长，😄
1. Sailor 博主 2011-10-21 13:23
  
  不是我写的，copy的而已
超级考拉 2012-02-08 03:51

欢迎回访！
1. Sailor 博主 2012-02-22 17:34
  
  嗯,会回访的~~~
2. 超级考拉回复 @Sailor 2012-02-22 17:37
  
  呵呵，我怎么没看见你在我的博博上留脚印或者留言什么的。这样我才知道你确实到过呀。
3. Sailor 博主回复 @超级考拉 2012-02-22 17:39
  
  因为我今天刚刚开始清理博客,之前换域名了~~~😄
超级考拉 2012-02-22 17:43

你这博克界面也特好玩，我也在弄我的博克，还没弄好，等焉可能会无法访问。
1. Sailor 博主 2012-02-22 18:04
  
  额,你这是刚刚搭建啊?