Sweet Titles 這個名字源自於一個改變 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但讓你的 title 提示效果變得美觀，而且可以顯示出你將要點擊的鏈接的 url，讓用戶知道自己將要去哪裡，同時提升了用戶感受度。而且我認為，系統的 title 提示有時間延遲，用 js 實現的可以迅速的展示出來。
Sweet Titles 這個名字源自於一個改變 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但讓你的 title 提示效果變得美觀，而且可以顯示出你將要點擊的鏈接的 url，讓用戶知道自己將要去哪裡，同時提升了用戶感受度。而且我認為，系統的 title 提示有時間延遲，用 js 實現的可以迅速的展示出來。
看起來不錯~ 小特效。
嘎嘎
還是我介紹給Leeiio知道這個js的捏~
另外，提醒大家，Sweet Titles 在超鏈接增加了title提示的情況下效果最佳，歡迎使用~
加上這個效果覺得有點花，但我很喜歡你的非同步載入
是有點花 🙄
@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
恩，不過個人博客嘛，隨便瞎折騰~
不錯。。。 🙂
我昨天在ishawn.net博客上發現這個描點平滑滾動，同時有下滑振動的效果。
不知是如何實現的？？？效果很棒。。。（頁面內錨點平滑移動那個怎麼加easing 效果）
博主請問一下,像剛才我說的那個博客,他的留言效果好棒的,不知博主你有什麼代碼可以實現呢?我覺他的網站載入很少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 🙄
@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了，不用硬代碼~用了！ 😛
我對這東東可是一瞧不懂 搗鼓了好久 終於搞定了 非常感謝這麼詳細的教程 🙄
@球犯 客氣客氣！ 😆
Pingback: 無折騰，不WP
額..出了個小問題，就是@回復那個懸浮的框框，會被sweettitles的框框擋住，怎麼解決呢？
問題我博客留言處可以看到，謝 🙂
@球犯 代碼中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”來排除class為atreply的a標籤，或者用tipElements : “a:not([href^=’#’])”來排除href為錨點的a標籤
@Leeiio 呵呵，感謝~解決了~ 🙄
@Leeiio 那個tipElements在哪裡我怎麼找不到？？？能教教我嗎？
我看代碼中有這個說明：Do not include href=”#xxx” : a:not([href^=’#’])
我網站中卻有這個東西，載入了代碼後網站內容不能正常顯示，請教博主，這怎樣解決呢？
@yangluhai 這個不用載入的啊，是注釋說明
Pingback: jQuery(Sweet Titles(美妙的標題提示 | MOPVHS's Blog
我使用的是英文版的wp3.0.
我使用了這個插件，發現滑鼠指向文章主題，挑出的鏈接，不顯示中文。
比如我在後台設置normal分類的slug和描述都是中文。
但是滑鼠指向後，顯示出的不是中文而是”8%%ef%e”等等這些字元串。看起來又不是亂碼。
請問該如何解決這個問題？
好吧，上面你的評論是我。描述有點問題：
我現在遇到的主要問題是，滑鼠指向標題，不顯示白色標題提示，只有超連接，而連接又不顯示中文，顯示的是%e$等這些符號。
超鏈接我想是因為在後台設置了Custom Structure /%category%/%postname%/中的%postname%/引起的。怎麼可以像你的博客一樣，顯示中文標題，但超鏈接不是呢
@lee wordpress本身就可以在添加或編輯文章的時候設置該篇日誌的url的啊。
新問題。我想在菜單欄添加和你一樣的手氣不錯按鈕。找了資料，是在主題頂部導航裡面加入
< ?php $rand_post=get_posts(‘numberposts=1&orderby=rand’); foreach($rand_post as $post) : ?>
手氣不錯< ?php endforeach; ?>
問題出現了，我現在使用的是WP3.0的主題，菜單欄由後台控制進行管理添加，看起來沒辦法添加這段代碼。
我想到折衷的解決辦法，生成一個菜單，指到一個鏈接。
這個鏈接可以隨機跳轉到一個隨即文章。
那這個鏈接的功能該如何實現？
請指教。。。
@lee 有個random post的插件可以滿足你的需求。
想問問 如何實現 在鏈接前面實現 link to
效果
@妙妙 在主題裡面修改的，自己手動加上就好
我的站點用了此功能~
但是在回復留言的@懸浮功能上也會有提示
怎麼辦呢？
請幫忙解答~
教教我吧~
@回復那個懸浮的框框，會被sweettitles的框框擋住，怎麼解決呢？
@blueandhack 參見此文的以往評論
Pingback: sweetTitles插件 美妙的標題提示 | blueandhack
leeiio為什麼調用最新版jquery會出現錯誤呢？
或者是wordpress3.0.1版自帶的jq都會導致錯誤，而用你的那裡面的那個版本不會，請問怎麼解決？
錯誤是
網頁錯誤詳細信息
對象不支持此屬性或方法
行: 41
字元: 1
代碼: 0
sweetTitles.js
@blueandhack 提供地址看下，你這樣描述我怎麼知道識啥
Pingback: sweetTitles插件，美妙的標題提示 | Blog Times - belonging to our own blog times
Pingback: AccEsS ThE WorLD
不過ie下，原生的title提示也會出現，這個比較杯具！
可以把title或者alt的值先賦值給變數，然後用removeAttribute(“title”)、removeAttribute(“alt”)來移除值解決這個問題~
漂亮~豐富~想要~自己研究
請問若要加一個判斷，如果title等於空或者沒有寫title則不顯示出來，應該怎麼做？求教~我真不懂語法 我自己亂if了半天也沒結果=_=’
@devin init : function() {}
里的全部內容用if包裹，if($(this.tipElements).attr(‘title’) == null || (this.tipElements).attr(‘title’) == ”)
@Leeiio 我研究到現在這麼多天了，仍然沒能解決，您能幫幫我嗎，我知道添麻煩給您了…
@devin 抱歉…漏了個字
init : function() {}
里的全部內容用if包裹，if($(this.tipElements).attr(『title』) == null || $(this.tipElements).attr(『title』) == 」)
可能直接複製會有問題，wordpress把引號轉換了，請替換引號為英文的引號。
這個有辦法呈現在 flash 上面嗎?
剛剛在 Js 修改新增 z-index:999 也不能呢@@
版大有辦法解決嗎@@?
@Stanley 會被flash遮擋的，沒考慮這個問題因為我不喜歡用flash，等我空了會增強這個插件的
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了，如何定義？求教了！
@Kael.Z 修改 tipElements : “a”中的引號部分
這個a部分如何定義大小？代碼知識不是很熟練啊！求教leeiio 😛
我只想文章的正文內容出有此效果a代碼如何寫？ 😯
Pingback: Sweet Titles for jQuery (美妙的標題提示) | 嗨！CC！| 我的CC生活記錄！
沒有自動適應瀏覽器邊框的功能，，原版的是有的吧，要是能加上就完美了 😀
😈 😈 收了收了，最近正在做一個新的博客
Pingback: 為鏈接添加一個醒目的提示 - 冰凌峰博客
Pingback: 為鏈接添加一個半透明醒目的提示 | 趙周光
這個評論框能收到回復提醒嗎？
可以。
確實收到了。是不是只有在這個評論插件里能看見呢？
後台應該怎麼設置？
Pingback: 為鏈接添加一個醒目的提示 - 生命不息,奮鬥不止 | 生命不息,奮鬥不止
更新後你的download文件應該也要更新啊