wordpress笔记之链接提示美化

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 = "
" + this.myTitle + "

" + this.myHref + "

" + "

";
        $('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;}

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

折腾笔记系列:

 

 


作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。


  1. 志慧
    1#
    志慧

    这样感觉总有个东西跟着鼠标特烦~[face:touxiao]

    September 27th, 2011 at 02:23 pm 回复
      1. sailor
        sailor

        恩,我也是这么感觉,于是并没有用,只是做了一个记录,或许有人会用到

        October 20th, 2011 at 03:19 am 回复
  2. 阿疯
    2#
    阿疯

    额,我看见那个漂浮的比较烦。想关都关不掉,还来回飘动。真晕。
    还有你介绍添加的效果都会让加载速度变慢

    September 27th, 2011 at 02:37 pm 回复
      1. 支持!

        September 29th, 2011 at 07:40 pm 回复
          1. sailor
            sailor

            还希望离子多多指教

            October 20th, 2011 at 03:21 am 回复
      2. sailor
        sailor

        的确是这样的,我没有什么基础,只是从网上搜索的教程,所以就造成了现在的问题,也谢谢你的提醒

        October 20th, 2011 at 03:21 am 回复
  3. 正想修改一下我用主题...你的一些文章可能派得上用场!

    September 27th, 2011 at 03:09 pm 回复
      1. sailor
        sailor

        呵呵,那就算不枉我的初衷吧,希望能够帮到更多的人

        October 20th, 2011 at 03:22 am 回复
  4. Arvixe
    4#
    Arvixe

    博主 的网站做的不错呀。我很喜欢这样的主题

    September 27th, 2011 at 03:56 pm 回复
      1. sailor
        sailor

        谢谢夸奖,谢谢,谢谢[face:daxiao]

        October 20th, 2011 at 03:22 am 回复
  5. DH
    5#
    DH

    mark

    September 27th, 2011 at 04:34 pm 回复
      1. sailor
        sailor

        额,我倒是mark了你很多ajax的文章啊[face:touxiao][face:touxiao]

        October 20th, 2011 at 03:22 am 回复
  6. MurphyL
    6#
    MurphyL

    嘿嘿~~折腾了哈~~

    September 27th, 2011 at 10:10 pm 回复
      1. sailor
        sailor

        生命不息,折腾不止~

        October 20th, 2011 at 03:23 am 回复
  7. 你打网球嘛?那个小男孩说去打网球了

    September 28th, 2011 at 11:48 pm 回复
      1. sailor
        sailor

        不打,这个小孩子是网球王子里面的~

        October 20th, 2011 at 03:23 am 回复
  8. walfred
    8#
    walfred

    友链已经添加

    September 29th, 2011 at 09:56 am 回复
      1. sailor
        sailor

        谢谢~[face:daxiao]

        October 20th, 2011 at 03:23 am 回复
  9. 雨帆
    9#
    雨帆

    看不大懂的说 =。=

    September 29th, 2011 at 12:38 pm 回复
      1. sailor
        sailor

        你又装了~~~

        October 20th, 2011 at 03:24 am 回复
          1. 真的看不懂的说哦[face:daku]我哭哭哭。

            October 20th, 2011 at 03:40 pm 回复
              1. sailor
                sailor

                哎呀,都是学软件的,这点东西怎么可能难得了你

                October 21st, 2011 at 01:22 pm 回复
  10. su
    10#
    su

    呵呵主题不错啊 喜欢那个小人啊

    September 30th, 2011 at 12:20 pm 回复
      1. sailor
        sailor

        现在大家对这个小人褒贬不一啊[face:han]

        October 20th, 2011 at 03:24 am 回复
  11. netyang
    11#
    netyang

    看到拿福能的广告 真的感觉拿福能好无能~

    September 30th, 2011 at 03:33 pm 回复
      1. sailor
        sailor

        额,就当是博客的一个点缀吧~

        October 20th, 2011 at 03:25 am 回复
  12. 仰肖
    12#
    仰肖

    效果在哪,没看明白。

    October 1st, 2011 at 12:10 pm 回复
      1. sailor
        sailor

        这个效果没有用到我的博客里面,只是记录一下

        October 20th, 2011 at 03:25 am 回复
  13. 我的博客什么效果都没有,可能是我喜欢简洁吧。

    October 1st, 2011 at 03:44 pm 回复
      1. sailor
        sailor

        恩,很喜欢你那种简洁的风格,这个主题用厌了,我也就回归简洁路线了

        October 20th, 2011 at 03:26 am 回复
          1. 所谓审美美劳?

            October 20th, 2011 at 05:30 am 回复
              1. sailor
                sailor

                本来就是简洁控,只是这个看着舒服而已

                October 20th, 2011 at 08:28 am 回复
  14. netyang
    14#
    netyang

    都没有ZBLOG啊!!![face:daku][face:daku][face:daku][face:daku]

    October 2nd, 2011 at 12:12 pm 回复
      1. sailor
        sailor

        额,其实原理是一样的,触类旁通嘛

        October 20th, 2011 at 03:26 am 回复
  15. 罗伊
    15#
    罗伊

    觉得这个功能很鸡肋,读者为什么要知道这个链接是干嘛的,为什么要知道这个链接链向哪里?一般的读者根本不会想这些。

    October 3rd, 2011 at 11:57 am 回复
      1. sailor
        sailor

        的确是这样的,所以我没有用这个效果,只是记录一下

        October 20th, 2011 at 03:27 am 回复
  16. 绿绿的,挺不错的,这模版~~ [face:daxiao]

    October 5th, 2011 at 08:32 pm 回复
      1. sailor
        sailor

        呵呵,谢谢夸奖~~~

        October 20th, 2011 at 03:27 am 回复
  17. 寒意
    17#
    寒意

    最近都没怎么更新,你还真是能折腾的~[face:han]

    October 9th, 2011 at 01:15 pm 回复
      1. sailor
        sailor

        马上就是新一轮的更新热潮了

        October 20th, 2011 at 03:27 am 回复
  18. walfred
    18#
    walfred

    一直是在搞wordpress阿,估计不久你就成wp达人了

    October 10th, 2011 at 09:24 am 回复
      1. sailor
        sailor

        额,不怎么搞了,准备学习一下相关web代码了

        October 20th, 2011 at 03:28 am 回复
  19. 雨丸
    19#
    雨丸

    真没有看到效果啊~~~
    不过爱折腾才是人生啊~~哈哈[face:daxiao]

    October 11th, 2011 at 02:25 pm 回复
      1. sailor
        sailor

        呵呵,我感觉这个效果影响用户体验,就去掉了~

        October 20th, 2011 at 03:28 am 回复
  20. 哇!技术控啊!哈哈 支持支持[face:daxiao]

    October 12th, 2011 at 12:21 pm 回复
      1. sailor
        sailor

        谢谢支持,谢谢谢谢[face:daxiao][face:daxiao]

        October 20th, 2011 at 03:29 am 回复
  21. 感觉用处不大,不太习惯这个

    October 16th, 2011 at 12:01 am 回复
      1. sailor
        sailor

        我也感觉几乎没有多大用处,所以就记录了一下而已~

        October 20th, 2011 at 03:29 am 回复
  22. 无冷
    22#
    无冷

    代码还挺长,[face:daxiao]

    October 20th, 2011 at 10:23 am 回复
      1. sailor
        sailor

        不是我写的,copy的而已

        October 21st, 2011 at 01:23 pm 回复
  23. 欢迎回访!

    February 8th, 2012 at 03:51 am 回复
      1. sailor
        sailor

        嗯,会回访的~~~

        February 22nd, 2012 at 05:34 pm 回复
          1. 呵呵,我怎么没看见你在我的博博上留脚印或者留言什么的。这样我才知道你确实到过呀。

            February 22nd, 2012 at 05:37 pm 回复
              1. sailor
                sailor

                因为我今天刚刚开始清理博客,之前换域名了~~~[face:daxiao]

                February 22nd, 2012 at 05:39 pm 回复
  24. 你这博克界面也特好玩,我也在弄我的博克,还没弄好,等焉可能会无法访问。

    February 22nd, 2012 at 05:43 pm 回复
      1. sailor
        sailor

        额,你这是刚刚搭建啊?

        February 22nd, 2012 at 06:04 pm 回复


最新文章