Sweet Titles for jQuery (美妙的標題提示) !

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

View Demo Sweet Titles for jQuery

ZIP File22.75 kB 共被下載1231次

2010.11.27更新:增加選項設置當沒有title屬性的時候不顯示sweetTitle。

  • 看起來不錯~ 小特效。

  • 嘎嘎
    還是我介紹給Leeiio知道這個js的捏~

  • 另外,提醒大家,Sweet Titles 在超鏈接增加了title提示的情況下效果最佳,歡迎使用~

  • 加上這個效果覺得有點花,但我很喜歡你的非同步載入 :mrgreen: :mrgreen:

  • 是有點花 :roll:

  • @Alex @ucax 花哨的話其實可以通過修改css改變它的顯示樣式來讓用戶覺得不怎麼花哨的,主要是我用了對比色比較強烈的色調才讓人覺得花哨,個人博客其實也無所謂啦哈。

  • 好強大….暫時對我用處不大

  • 效果真好。

  • 我看你的站載入的東西可是越來越多了,什麼時候來個全站Ajax。哈哈

  • @Kimcool
    已經開始慢慢精簡了,全站ajax就算了,中間的交互過程可能會增加很多,但是準備文章列表頁弄成非同步載入哈。

  • 有一點需要改進的是,沒有對換行的代碼進行設置,比如我第一行顯示標題,第二行顯示時間,第三行顯示作者等,這個加上就完美了!

    給你看段js里的正則示例參考:

    if(pltsPop!=null&&pltsPop!=””&&typeof(pltsPop)!=”undefined”)
    {pltsTipLayer.style.left=-1000;
    pltsTipLayer.style.display=”;
    var Msg=pltsPop.replace(/\n/g,””);
    Msg=Msg.replace(/x13/g,””);
    var re=/\{(.[^\{]*)\}/ig;
    if(!re.test(Msg))pltsTitle=””;
    else{
    re=/\{(.[^\{]*)\}(.*)/ig;
    pltsTitle=Msg.replace(re,”$1″)+” “;
    re=/\{(.[^\{]*)\}/ig;
    Msg=Msg.replace(re,””);
    Msg=Msg.replace(“”,””);}

  • 太多效果反而適得其反,我還是喜歡簡潔點

  • @Youwei
    恩,不過個人博客嘛,隨便瞎折騰~

  • nefull

    不錯。。。 🙂

  • nefull

    我昨天在ishawn.net博客上發現這個描點平滑滾動,同時有下滑振動的效果。
    不知是如何實現的???效果很棒。。。(頁面內錨點平滑移動那個怎麼加easing 效果)

  • nefull

    博主請問一下,像剛才我說的那個博客,他的留言效果好棒的,不知博主你有什麼代碼可以實現呢?我覺他的網站載入很少JS就實現很多並且很好的效果,其實之前,平滑振動,我根本沒有發現他載入有那個插件的JS,可能他用很少的代碼實現了!想請博主你還有什麼好的方可以實上面兩種效果呢?

  • 好像開頭定義的X Y沒用上阿

  • @ nefull
    實現平滑可以用這個
    $(‘#commentshead a[href*=#],.commentcount a[href*=#]’).click(function() {
    if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target
    || $(‘[name=’ + this.hash.slice(1) +’]’);
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $(‘html,body’)
    .animate({scrollTop: targetOffset}, 1000,”easeOutElastic”);
    return false;
    }
    }
    });
    注意animate()函數裡面的easeOutElastic,也就是easing效果,需要插件支持.默認jQuery提供”linear” 和 “swing”。

  • @小諾
    呃,寫著寫著就忘了,文章的數值20和10都應該是用x和y替換的。

  • @Leeiio
    哈哈 看出來了~~~ 在你這裡總能不斷學習阿~

  • Pingback: jQuery 滑鼠經過動畫 - Noslog()

  • Pingback: JQuery 學習筆記之:美妙的標題提示 | 木木木木木()

  • 怎樣載入 jQuery 庫???????SOS :roll:

  • @Junan
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
    這樣既可。

  • 博主可補可以說明白點~~~怎樣載入 jQuery 庫??????? 😥

  • @Junan
    見上條回復。

  • @Junan

    這樣既可。

    請問加在哪個文件???? 😥

  • 還有就是你博客左邊的 ↑↓ 代碼是什麼??加在哪個文件里???好漂亮~~ 💡

  • trackback有沒發來?http://blog.zhengyuzhong.com/archives/net/template-sweet-titles 我做的改進 😐

  • 原理很簡單,獲取滑鼠坐標,生成一個DIV,設置初始坐標是滑鼠坐標的右下偏移。
    同時,mousemove時候,重設坐標,使之跟隨。哈哈。

    大家都可以自己動手嘗試一下。另外,利用$(dom).show(speed,fn);的方法,可以做出一種逐漸出現或者逐漸消失的效果。不過要注意延時性。

  • 😎 我網站header使用了這個js ,首頁的所有鏈接不能顯示啊 進入文章內頁都行 這是怎麼回事啊?期盼回復

  • @vsweb
    呃,應該不會造成連接消失的情況,你是怎麼使用的?

  • 非常好的效果,找到plugin了,不用硬代碼~用了! 😛

  • 我對這東東可是一瞧不懂 搗鼓了好久 終於搞定了 非常感謝這麼詳細的教程 :roll:

  • Pingback: 無折騰,不WP()

  • 額..出了個小問題,就是@回復那個懸浮的框框,會被sweettitles的框框擋住,怎麼解決呢?
    問題我博客留言處可以看到,謝 🙂

    • @球犯 代碼中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”來排除class為atreply的a標籤,或者用tipElements : “a:not([href^=’#’])”來排除href為錨點的a標籤

    • @Leeiio 呵呵,感謝~解決了~ :roll:

    • @Leeiio 那個tipElements在哪裡我怎麼找不到???能教教我嗎?

  • 我看代碼中有這個說明:Do not include href=”#xxx” : a:not([href^=’#’])

    我網站中卻有這個東西,載入了代碼後網站內容不能正常顯示,請教博主,這怎樣解決呢?

  • Pingback: jQuery(Sweet Titles(美妙的標題提示 | MOPVHS's Blog()

  • lee

    我使用的是英文版的wp3.0.
    我使用了這個插件,發現滑鼠指向文章主題,挑出的鏈接,不顯示中文。
    比如我在後台設置normal分類的slug和描述都是中文。
    但是滑鼠指向後,顯示出的不是中文而是”8%%ef%e”等等這些字元串。看起來又不是亂碼。
    請問該如何解決這個問題?

  • lee

    好吧,上面你的評論是我。描述有點問題:
    我現在遇到的主要問題是,滑鼠指向標題,不顯示白色標題提示,只有超連接,而連接又不顯示中文,顯示的是%e$等這些符號。
    超鏈接我想是因為在後台設置了Custom Structure /%category%/%postname%/中的%postname%/引起的。怎麼可以像你的博客一樣,顯示中文標題,但超鏈接不是呢

    • @lee wordpress本身就可以在添加或編輯文章的時候設置該篇日誌的url的啊。

  • lee

    新問題。我想在菜單欄添加和你一樣的手氣不錯按鈕。找了資料,是在主題頂部導航裡面加入
    < ?php $rand_post=get_posts(‘numberposts=1&orderby=rand’); foreach($rand_post as $post) : ?>
    手氣不錯< ?php endforeach; ?>

    問題出現了,我現在使用的是WP3.0的主題,菜單欄由後台控制進行管理添加,看起來沒辦法添加這段代碼。
    我想到折衷的解決辦法,生成一個菜單,指到一個鏈接。
    這個鏈接可以隨機跳轉到一個隨即文章。
    那這個鏈接的功能該如何實現?
    請指教。。。

    • @lee 有個random post的插件可以滿足你的需求。

  • 想問問 如何實現 在鏈接前面實現 link to
    效果

  • 我的站點用了此功能~
    但是在回復留言的@懸浮功能上也會有提示
    怎麼辦呢?
    請幫忙解答~

  • 教教我吧~
    @回復那個懸浮的框框,會被sweettitles的框框擋住,怎麼解決呢?

  • Pingback: sweetTitles插件 美妙的標題提示 | blueandhack()

  • leeiio為什麼調用最新版jquery會出現錯誤呢?
    或者是wordpress3.0.1版自帶的jq都會導致錯誤,而用你的那裡面的那個版本不會,請問怎麼解決?
    錯誤是
    網頁錯誤詳細信息
    對象不支持此屬性或方法
    行: 41
    字元: 1
    代碼: 0
    sweetTitles.js

  • Pingback: sweetTitles插件,美妙的標題提示 | Blog Times - belonging to our own blog times()

  • Pingback: AccEsS ThE WorLD()

  • 不過ie下,原生的title提示也會出現,這個比較杯具!
    可以把title或者alt的值先賦值給變數,然後用removeAttribute(“title”)、removeAttribute(“alt”)來移除值解決這個問題~

  • 漂亮~豐富~想要~自己研究

  • devin

    請問若要加一個判斷,如果title等於空或者沒有寫title則不顯示出來,應該怎麼做?求教~我真不懂語法 我自己亂if了半天也沒結果=_=’

    • @devin init : function() {}
      里的全部內容用if包裹,if($(this.tipElements).attr(‘title’) == null || (this.tipElements).attr(‘title’) == ”)

    • devin

      @Leeiio 我研究到現在這麼多天了,仍然沒能解決,您能幫幫我嗎,我知道添麻煩給您了…

    • @devin 抱歉…漏了個字
      init : function() {}
      里的全部內容用if包裹,if($(this.tipElements).attr(『title』) == null || $(this.tipElements).attr(『title』) == 」)

      可能直接複製會有問題,wordpress把引號轉換了,請替換引號為英文的引號。

  • Stanley

    這個有辦法呈現在 flash 上面嗎?

    剛剛在 Js 修改新增 z-index:999 也不能呢@@

    版大有辦法解決嗎@@?

    • @Stanley 會被flash遮擋的,沒考慮這個問題因為我不喜歡用flash,等我空了會增強這個插件的

  • Stanley

    init : function() {
    if($(this.tipElements).attr(『title』) == null || (this.tipElements).attr(『title』) == 」)
    ]

    另外我這樣用 會有問題= =’

    是哪邊用錯了?

    • @Stanley 抱歉…漏了個字
      init : function() {}
      里的全部內容用if包裹,if($(this.tipElements).attr(『title』) == null || $(this.tipElements).attr(『title』) == 」){ }

      可能直接複製會有問題,wordpress把引號轉換了,請替換引號為英文的引號。

  • 有沒有效果演示呀!想看看!

  • 如何定義指定區域才有此效果,不想整個頁面都達到這樣的效果,部分就OK了,如何定義?求教了!

  • 這個a部分如何定義大小?代碼知識不是很熟練啊!求教leeiio 😛

  • 我只想文章的正文內容出有此效果a代碼如何寫? 😯

  • Pingback: Sweet Titles for jQuery (美妙的標題提示) | 嗨!CC!| 我的CC生活記錄!()

  • BOBO

    沒有自動適應瀏覽器邊框的功能,,原版的是有的吧,要是能加上就完美了 😀

  • 😈 😈 收了收了,最近正在做一個新的博客

  • Pingback: 為鏈接添加一個醒目的提示 - 冰凌峰博客()

  • Pingback: 為鏈接添加一個半透明醒目的提示 | 趙周光()

  • 這個評論框能收到回復提醒嗎?

    • 可以。

    • 確實收到了。是不是只有在這個評論插件里能看見呢?

  • 後台應該怎麼設置?

  • Pingback: 為鏈接添加一個醒目的提示 - 生命不息,奮鬥不止 | 生命不息,奮鬥不止()

  • yaohuaengineer

    更新後你的download文件應該也要更新啊