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

Sweet Titles for jQuery (美妙的标题提示)
Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里,同时提升了用户感受度。而且我认为,系统的 title 提示有时间延迟,用 js 实现的可以迅速的展示出来。

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

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