wordpress笔记之链接提示美化

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

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

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

折腾笔记系列：