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

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

86 Responses to Sweet Titles for jQuery (美妙的标题提示) !

  1. 沿阶草 says:

    看起来不错~ 小特效。

  2. Showfom says:

    嘎嘎
    还是我介绍给Leeiio知道这个js的捏~

  3. Showfom says:

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

  4. Alex says:

    加上这个效果觉得有点花,但我很喜欢你的异步加载 :mrgreen: :mrgreen:

  5. ucax says:

    是有點花 🙄

  6. Leeiio says:

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

  7. 吖Bee says:

    好强大….暂时对我用处不大

  8. Kimcool says:

    我看你的站加载的东西可是越来越多了,什么时候来个全站Ajax。哈哈

  9. Leeiio says:

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

  10. 任侠 says:

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

    给你看段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(“”,””);}

  11. Youwei says:

    太多效果反而适得其反,我还是喜欢简洁点

  12. Leeiio says:

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

  13. nefull says:

    不错。。。 🙂

  14. nefull says:

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

  15. nefull says:

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

  16. 小诺 says:

    好像开头定义的X Y没用上阿

  17. Leeiio says:

    @ 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”。

  18. Leeiio says:

    @小诺
    呃,写着写着就忘了,文章的数值20和10都应该是用x和y替换的。

  19. 小诺 says:

    @Leeiio
    哈哈 看出来了~~~ 在你这里总能不断学习阿~

  20. Pingback: jQuery 鼠标经过动画 - Noslog

  21. Pingback: JQuery 学习笔记之:美妙的标题提示 | 木木木木木

  22. Junan says:

    怎样载入 jQuery 库???????SOS 🙄

  23. Leeiio says:

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

  24. Junan says:

    博主可补可以说明白点~~~怎样载入 jQuery 库??????? 😥

  25. Junan says:

    @Junan

    这样既可。

    请问加在哪个文件???? 😥

  26. Junan says:

    还有就是你博客左边的 ↑↓ 代码是什么??加在哪个文件里???好漂亮~~ 💡

  27. 羽中 says:

    trackback有没发来?http://blog.zhengyuzhong.com/archives/net/template-sweet-titles 我做的改进 😐

  28. feihongly says:

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

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

  29. vsweb says:

    😎 我网站header使用了这个js ,首页的所有链接不能显示啊 进入文章内页都行 这是怎么回事啊?期盼回复

  30. Leeiio says:

    @vsweb
    呃,应该不会造成连接消失的情况,你是怎么使用的?

  31. apollools says:

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

  32. 球犯 says:

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

  33. Pingback: 无折腾,不WP

  34. 球犯 says:

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

  35. yangluhai says:

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

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

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

  37. lee says:

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

  38. lee says:

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

  39. lee says:

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

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

  40. 妙妙 says:

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

  41. blueandhack says:

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

  42. blueandhack says:

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

  43. Pingback: sweetTitles插件 美妙的标题提示 | blueandhack

  44. blueandhack says:

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

  45. Pingback: sweetTitles插件,美妙的标题提示 | Blog Times - belonging to our own blog times

  46. Pingback: AccEsS ThE WorLD

  47. 黑幕困兽 says:

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

  48. 门牙 says:

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

  49. devin says:

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

    • Leeiio says:

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

    • devin says:

      @Leeiio 我研究到现在这么多天了,仍然没能解决,您能帮帮我吗,我知道添麻烦给您了…

    • Leeiio says:

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

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

  50. Stanley says:

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

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

    版大有辦法解決嗎@@?

  51. Stanley says:

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

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

    是哪邊用錯了?

    • Leeiio says:

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

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

  52. 明月登楼 says:

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

  53. Kael.Z says:

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

  54. Kael.Z says:

    这个a部分如何定义大小?代码知识不是很熟练啊!求教leeiio 😛

  55. Kael.Z says:

    我只想文章的正文内容出有此效果a代码如何写? 😯

  56. Pingback: Sweet Titles for jQuery (美妙的标题提示) | 嗨!CC!| 我的CC生活记录!

  57. BOBO says:

    没有自动适应浏览器边框的功能,,原版的是有的吧,要是能加上就完美了 😀

  58. ninnworx says:

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

  59. Pingback: 为链接添加一个醒目的提示 - 冰凌峰博客

  60. Pingback: 为链接添加一个半透明醒目的提示 | 赵周光

  61. 小艾博客 says:

    这个评论框能收到回复提醒吗?

  62. 小艾博客 says:

    后台应该怎么设置?

  63. Pingback: 为链接添加一个醒目的提示 - 生命不息,奋斗不止 | 生命不息,奋斗不止

  64. yaohuaengineer says:

    更新后你的download文件应该也要更新啊

Leave a Reply to Leeiio Cancel reply

Your email address will not be published. Required fields are marked *