eDIKUD'S Blog

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

var sweetTitles = {

    x : 10,                                
    y : 20,                                
    tipElements : "a",                    
    init : function() {
        $(this.tipElements).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 = "<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(){
            this.title = this.myTitle;
            $('#tooltip').remove();
        }).mousemove(function(e){
            $('#tooltip')
            .css({
                "top":(e.pageY+20)+"px",
                "left":(e.pageX+10)+"px"
            });
        });
    }
};
$(function(){
    sweetTitles.init();
});

body div#tooltip { position:absolute;z-index:1000;width: auto;max-width:500px;background:#EDF5FA none repeat scroll 0% 50%;border:3px solid #CEF3FF;padding:1px;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;font-family:Verdana,Arial,Helvetica,Georgia,Sans-Serif;}
body div#tooltip p { margin:0;padding:0;color:#027AC6;font:12px Verdana,Arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
body div#tooltip p em span { font-weight:bold;color:#669900; } P.S. “喜欢本文？现在就把它分享到 Twitter 或者通过RSS关注本站的更新 ^ O ^ 。” — by edikud @ 09-10-21 - 20:41。

转载请注明：来自eDIKUD'S Blog