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 共被下载998次

2010.11.27更新：增加选项设置当没有title属性的时候不显示sweetTitle。

Leeiio @ Mon @ July 27th, 2009
用户体验 Javascript jQuery Sweet Titles
Skill | 技术
2,933 Views
<iframe src="//www.facebook.com/plugins/like.php?href=http://leeiio.me/sweet-titles-for-jquery/&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe> <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="leeiio">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

http://www.yanjiecao.com 沿阶草

看起来不错~ 小特效。
http://showfom.com/ Showfom

嘎嘎
还是我介绍给Leeiio知道这个js的捏~
http://showfom.com/ Showfom

另外，提醒大家，Sweet Titles 在超链接增加了title提示的情况下效果最佳，欢迎使用~
http://www.caxblog.com Alex

加上这个效果觉得有点花，但我很喜欢你的异步加载
http://www.ucax.net ucax

是有點花
http://leeiio.me/ Leeiio

@Alex @ucax 花哨的话其实可以通过修改css改变它的显示样式来让用户觉得不怎么花哨的，主要是我用了对比色比较强烈的色调才让人觉得花哨，个人博客其实也无所谓啦哈。
http://www.iqbee.cn 吖Bee

好强大….暂时对我用处不大
http://zwwooooo.com zwwooooo

效果真好。
http://booto.net Kimcool

我看你的站加载的东西可是越来越多了，什么时候来个全站Ajax。哈哈
http://leeiio.me Leeiio

@Kimcool
已经开始慢慢精简了，全站ajax就算了，中间的交互过程可能会增加很多，但是准备文章列表页弄成异步加载哈。
http://www.zhiwenweb.cn 任侠

有一点需要改进的是，没有对换行的代码进行设置，比如我第一行显示标题，第二行显示时间，第三行显示作者等，这个加上就完美了！

给你看段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(“”,”");}
http://jomor.org Youwei

太多效果反而适得其反，我还是喜欢简洁点
http://leeiio.me Leeiio

@Youwei
恩，不过个人博客嘛，随便瞎折腾~
nefull

不错。。。
nefull

我昨天在ishawn.net博客上发现这个描点平滑滚动，同时有下滑振动的效果。
不知是如何实现的？？？效果很棒。。。（页面内锚点平滑移动那個怎麼加easing 效果）
nefull

博主请问一下,像刚才我说的那个博客,他的留言效果好棒的,不知博主你有什么代码可以实现呢?我觉他的网站加载很少JS就实现很多并且很好的效果,其实之前,平滑振动,我根本没有发现他加载有那个插件的JS,可能他用很少的代码实现了!想请博主你还有什么好的方可以实上面两种效果呢?
http://www.noslog.com/ 小诺

好像开头定义的X Y没用上阿
http://leeiio.me/ Leeiio

@ 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”。
http://leeiio.me/ Leeiio

@小诺
呃，写着写着就忘了，文章的数值20和10都应该是用x和y替换的。
http://www.noslog.com/ 小诺

@Leeiio
哈哈看出来了～～～在你这里总能不断学习阿～
Pingback: jQuery 鼠标经过动画 - Noslog
Pingback: JQuery 学习笔记之：美妙的标题提示 | 木木木木木
http://www.gzjunan.cn Junan

怎样载入 jQuery 库？？？？？？？SOS
http://leeiio.me/ Leeiio

@Junan
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
这样既可。
http://www.gzjunan.cn Junan

博主可补可以说明白点~~~怎样载入 jQuery 库？？？？？？？
http://leeiio.me/ Leeiio

@Junan
见上条回复。
http://www.gzjunan.cn Junan

@Junan

这样既可。

请问加在哪个文件？？？？
http://www.gzjunan.cn Junan

还有就是你博客左边的 ↑↓ 代码是什么？？加在哪个文件里？？？好漂亮~~
http://blog.zhengyuzhong.com 羽中

trackback有没发来？http://blog.zhengyuzhong.com/archives/net/template-sweet-titles 我做的改进
http://wooshoo.cn feihongly

原理很简单，获取鼠标坐标，生成一个DIV，设置初始坐标是鼠标坐标的右下偏移。
同时，mousemove时候，重设坐标，使之跟随。哈哈。

大家都可以自己动手尝试一下。另外，利用$(dom).show(speed,fn);的方法，可以做出一种逐渐出现或者逐渐消失的效果。不过要注意延时性。
http://www.goocn.com vsweb

我网站header使用了这个js ，首页的所有链接不能显示啊进入文章内页都行这是怎么回事啊？期盼回复
http://leeiio.me/ Leeiio

@vsweb
呃，应该不会造成连接消失的情况，你是怎么使用的？
http://www.goocn.com vsweb
http://gkoo.net apollools

非常好的效果，找到plugin了，不用硬代码~用了！
http://dreamilk.com/blog 球犯

我对这东东可是一瞧不懂捣鼓了好久终于搞定了非常感谢这么详细的教程

http://leeiio.me/ Leeiio

@球犯客气客气！

Pingback: 无折腾，不WP
http://dreamilk.com/blog 球犯

额..出了个小问题，就是@回复那个悬浮的框框，会被sweettitles的框框挡住，怎么解决呢？
问题我博客留言处可以看到，谢

http://leeiio.me/ Leeiio

@球犯代码中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”来排除class为atreply的a标签，或者用tipElements : “a:not([href^='#'])”来排除href为锚点的a标签
http://dreamilk.com/blog 球犯

@Leeiio 呵呵，感谢~解决了~
http://blueandhack.com blueandhack

@Leeiio 那个tipElements在哪里我怎么找不到？？？能教教我吗？

http://www.enwsoft.com yangluhai

我看代码中有这个说明：Do not include href=”#xxx” : a:not([href^='#'])

我网站中却有这个东西，加载了代码后网站内容不能正常显示，请教博主，这怎样解决呢？

http://leeiio.me/ Leeiio

@yangluhai 这个不用加载的啊，是注释说明

Pingback: jQuery(Sweet Titles(美妙的标题提示 | MOPVHS's Blog
lee

我使用的是英文版的wp3.0.
我使用了这个插件，发现鼠标指向文章主题，挑出的链接，不显示中文。
比如我在后台设置normal分类的slug和描述都是中文。
但是鼠标指向后，显示出的不是中文而是”8%%ef%e”等等这些字符串。看起来又不是乱码。
请问该如何解决这个问题？
lee

好吧，上面你的评论是我。描述有点问题：
我现在遇到的主要问题是，鼠标指向标题，不显示白色标题提示，只有超连接，而连接又不显示中文，显示的是%e$等这些符号。
超链接我想是因为在后台设置了Custom Structure /%category%/%postname%/中的%postname%/引起的。怎么可以像你的博客一样，显示中文标题，但超链接不是呢

http://leeiio.me/ Leeiio

@lee wordpress本身就可以在添加或编辑文章的时候设置该篇日志的url的啊。

lee

新问题。我想在菜单栏添加和你一样的手气不错按钮。找了资料，是在主题顶部导航里面加入
< ?php $rand_post=get_posts(‘numberposts=1&orderby=rand’); foreach($rand_post as $post) : ?>
手气不错< ?php endforeach; ?>

问题出现了，我现在使用的是WP3.0的主题，菜单栏由后台控制进行管理添加，看起来没办法添加这段代码。
我想到折衷的解决办法，生成一个菜单，指到一个链接。
这个链接可以随机跳转到一个随即文章。
那这个链接的功能该如何实现？
请指教。。。

http://leeiio.me/ Leeiio

@lee 有个random post的插件可以满足你的需求。

http://xia.lu 妙妙

想问问如何实现在链接前面实现 link to
效果

http://leeiio.me/ Leeiio

@妙妙在主题里面修改的，自己手动加上就好

http://blueandhack.com blueandhack

我的站点用了此功能~
但是在回复留言的@悬浮功能上也会有提示
怎么办呢？
请帮忙解答~
http://blueandhack.com blueandhack

教教我吧~
@回复那个悬浮的框框，会被sweettitles的框框挡住，怎么解决呢？

http://leeiio.me/ Leeiio

@blueandhack 参见此文的以往评论

Pingback: sweetTitles插件美妙的标题提示 | blueandhack
http://blueandhack.com blueandhack

leeiio为什么调用最新版jquery会出现错误呢？
或者是wordpress3.0.1版自带的jq都会导致错误，而用你的那里面的那个版本不会，请问怎么解决？
错误是
网页错误详细信息
对象不支持此属性或方法
行: 41
字符: 1
代码: 0
sweetTitles.js

http://leeiio.me/ Leeiio

@blueandhack 提供地址看下，你這樣描述我怎麼知道識啥

Pingback: sweetTitles插件，美妙的标题提示 | Blog Times - belonging to our own blog times
Pingback: AccEsS ThE WorLD
http://www.cssoul.com 黑幕困兽

不过ie下，原生的title提示也会出现，这个比较杯具！
可以把title或者alt的值先赋值给变量，然后用removeAttribute(“title”)、removeAttribute(“alt”)来移除值解决这个问题~
http://himy.net/ 门牙

漂亮~丰富~想要~自己研究
devin

请问若要加一个判断，如果title等于空或者没有写title则不显示出来，应该怎么做？求教~我真不懂语法我自己乱if了半天也没结果=_=’

http://leeiio.me/ Leeiio

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

@Leeiio 我研究到现在这么多天了，仍然没能解决，您能帮帮我吗，我知道添麻烦给您了…
http://leeiio.me/ Leeiio

@devin 抱歉…漏了个字
init : function() {}
里的全部内容用if包裹，if($(this.tipElements).attr(‘title’) == null || $(this.tipElements).attr(‘title’) == ”)

可能直接复制会有问题，wordpress把引号转换了，请替换引号为英文的引号。

Stanley

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

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

版大有辦法解決嗎@@?

http://leeiio.me/ Leeiio

@Stanley 会被flash遮挡的，没考虑这个问题因为我不喜欢用flash，等我空了会增强这个插件的

Stanley

init : function() {
if($(this.tipElements).attr(‘title’) == null || (this.tipElements).attr(‘title’) == ”)
]

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

是哪邊用錯了?

http://leeiio.me/ Leeiio

@Stanley 抱歉…漏了个字
init : function() {}
里的全部内容用if包裹，if($(this.tipElements).attr(‘title’) == null || $(this.tipElements).attr(‘title’) == ”){ }

可能直接复制会有问题，wordpress把引号转换了，请替换引号为英文的引号。

http://www.52digital.com 明月登楼

有没有效果演示呀！想看看！

http://leeiio.me/ Leeiio

@明月登楼文章底部，这么大都看不到

http://pd361.com/ Kael.Z

如何定义指定区域才有此效果，不想整个页面都达到这样的效果，部分就OK了，如何定义？求教了！

http://leeiio.me/ Leeiio

@Kael.Z 修改 tipElements : “a”中的引號部分

http://pd361.com/ Kael.Z

这个a部分如何定义大小？代码知识不是很熟练啊！求教leeiio
http://pd361.com/ Kael.Z

我只想文章的正文内容出有此效果a代码如何写？
Pingback: Sweet Titles for jQuery (美妙的标题提示) | 嗨！CC！| 我的CC生活记录！
BOBO

没有自动适应浏览器边框的功能，，原版的是有的吧，要是能加上就完美了
http://www.hotcs.com ninnworx

收了收了，最近正在做一个新的博客
Pingback: 为链接添加一个醒目的提示 - 冰凌峰博客
Pingback: 为链接添加一个半透明醒目的提示 | 赵周光