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
2010.11.27更新：增加選項設置當沒有title屬性的時候不顯示sweetTitle。
看起來不錯~ 小特效。
嘎嘎
還是我介紹給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文件應該也要更新啊