当前位置:首页 > WP教程 > 正文

Sweet Titles for jQuery (美妙的标题提示) !

Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里,同时提升了用户感受度。而且我认为,系统的 title 提示有时间延迟,用 js 实现的可以迅速的展示出来。

大家都知道 jQuery 是一个美妙且强大的 Javascript 库,用 jQuery 来写这个效果的话不单代码得到了很大的精简,效果的实现也可以更加美妙,更加容易对效果进行扩展。

所以我用 jQuery 对这个效果的代码进行了重新编写,请看下面的代码:

var sweetTitles = {
    x : 10,                             // @Number: x pixel value of current cursor position
    y : 20,                             // @Number: y pixel value of current cursor position
    tipElements : "a",                  // @Array: Allowable elements that can have the toolTip,split with ","
    noTitle : true,                     //if this value is false,when the elements has no title,it will not be show
    init : function() {
        var noTitle = this.noTitle;
        $(this.tipElements).each(function(){
            $(this).mouseover(function(e){
                if(noTitle){
                    isTitle = true;
                }else{
                    isTitle = $.trim(this.title) != '';
                }
                if(isTitle){
                    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 = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
                    $('body').append(tooltip);
                    $('#tooltip')
                        .css({
                            "opacity":"0.8",
                            "top":(e.pageY+20)+"px",
                            "left":(e.pageX+10)+"px"
                        }).show('fast');
                }
                }).mouseout(function(){
                    if(this.myTitle != null){
                        this.title = this.myTitle;
                        $('#tooltip').remove();
                    }
                }).mousemove(function(e){
                    $('#tooltip')
                    .css({
                        "top":(e.pageY+20)+"px",
                        "left":(e.pageX+10)+"px"
                    });
                });
        });
    }
};
$(function(){
    sweetTitles.init();
});

 

代码是不是很简单,记住不要忘了载入 jQuery 库哦。

当然光有效果没有样式还不行,需要制定一些 css 样式才能让整个效果显得更加美妙。以下是我的 css,供参考。

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

 

历史上的今天:

标签:
上一篇: 下一篇:

暂无评论

发表评论

不理你。 不要啊! 吃饭。 吃惊。 吃西瓜。 飞吻! 恭喜! Hi 纠结! 膜拜! OK 抛媚眼。 泡泡糖。 抛钱。 忍! 生闷气! 调皮。 偷看。 委屈。 献花。 疑问? 抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……