为链接添加一个醒目的提示

WordPress206.1K阅读模式

可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示，这是通过Sweet Titles标题增强插件实现的.

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

不过个人感觉这个特效有点鸡肋，反而会干扰视线，影响浏览者阅读。

插件加载的JS文件有点大5K多，而Leeiio童鞋提供的简化代码，只有不到2K，如果你喜欢这个效果那就加上吧（代码中符号冲突，被表情替代，但不会影响复制使用）：

  1. var sweetTitles = {
  2. x : 10, // @Number: x pixel value of current cursor position
  3. y : 20, // @Number: y pixel value of current cursor position
  4. tipElements : "a", // @Array: Allowable elements that can have the toolTip,split with ","
  5. noTitle : true, //if this value is false,when the elements has no title,it will not be show
  6. init : function() {
  7. var noTitle = this.noTitle;
  8. $(this.tipElements).each(function(){
  9. $(this).mouseover(function(e){
  10. if(noTitle){
  11. isTitle = true;
  12. }else{
  13. isTitle = $.trim(this.title) != '';
  14. }
  15. if(isTitle){
  16. this.myTitle = this.title;
  17. this.myHref = this.href;
  18. this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
  19. this.title = "";
  20. var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
  21. $('body').append(tooltip);
  22. $('#tooltip')
  23. .css({
  24. "opacity":"0.8",
  25. "top":(e.pageY+20)+"px",
  26. "left":(e.pageX+10)+"px"
  27. }).show('fast');
  28. }
  29. }).mouseout(function(){
  30. if(this.myTitle != null){
  31. this.title = this.myTitle;
  32. $('#tooltip').remove();
  33. }
  34. }).mousemove(function(e){
  35. $('#tooltip')
  36. .css({
  37. "top":(e.pageY+20)+"px",
  38. "left":(e.pageX+10)+"px"
  39. });
  40. });
  41. });
  42. }
  43. };
  44. $(function(){
  45. sweetTitles.init();
  46. });

代码很简洁，前提是你的主题已加载了 jQuery 库。

有效果没有样式还不行，而要添加 css 样式才能让整个效果显得更加美妙。以下是 css样式供参考。

  1. 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;}
  2. body div#tooltip p { margin:0;padding:0;color:#fff;font:12pxverdana,arial,sans-serif; }
  3. body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

以上代码来自：Sweet Titles for jQuery (美妙的标题提示)

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

WordPress文章与页面互换
WordPress文章与页面互换
图片为王，标题为皇
图片为王，标题为皇
移除WordPress 6.5区块样板菜单项
移除WordPress 6.5区块样板菜单项
获取指定侧边栏中的小工具列表
获取指定侧边栏中的小工具列表
weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • WordPress
  • JQuery
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  20  访客  16  作者  4
    • 漠天
      漠天 2
      山东省烟台市 1F
      回复

      这个功能很酷。哈哈。在这收藏啦

      • Kael.Z
        Kael.Z 7
        浙江省台州市临海市 2F
        回复

        鸟哥如何定义某些链接？不要全部有链接都出这种效果

        • Shovo
          Shovo 2
          广东省深圳市 3F
          回复

          很好看的一个效果！收下了，谢谢鸟哥~

          • Shovo
            Shovo 2
            广东省深圳市 4F
            回复

            鸟哥文章中的贴的代码 是用什么插件实现的？WP本身貌似不支持…

              • Kael.Z
                Kael.Z 7
                浙江省台州市临海市 B1
                回复

                @ Shovo 就是上面那些代码，当然鸟哥的自己优化修改过了，有点差别！

                • 知更鸟
                  知更鸟
                  中国 B1
                  回复

                  @ Shovo http://zmingcx.com/do-not-realize-wordpress-code-highlight-plugin.html

                • oceanmen
                  oceanmen 2
                  山东省青岛市 5F
                  回复

                  初来乍到，多向大哥学习！嘿嘿

                  • 李大羽
                    李大羽 1
                    江苏省泰州市姜堰市 6F
                    回复

                    代码怎么调用啊

                    • Matrix47
                      Matrix47 1
                      山东省济南市 7F
                      回复

                      鸟哥,你好,很稀罕您做的主题,谢谢您的分享,查阅使用问题汇总仍然得不到好的答案,我遇到了下面的问题:
                      我的分类栏目都调用到首页了.但是却只有排列整齐的文章标题,没有像你的主页分页栏目得到最新的文章题目摘要+其他文章列表,请问如何实现?

                      • 莫也
                        莫也 6
                        四川省成都市 8F
                        回复

                        好像你网站 右下角 的气泡提示不是用的这个吧？

                        • 断翅的PHP小超人
                          断翅的PHP小超人 1
                          河南省郑州市 9F
                          回复

                          感觉没这个必要吧，如果希望醒目，完全可以给A标签用CSS修饰一下。

                          • 比特币
                            比特币 1
                            福建省福州市 10F
                            回复

                            请问如何去掉，这个真的是很鸡肋啊

                            • ediclot
                              ediclot 0
                              广东省广州市 11F
                              回复

                              知更鸟主题底部的信息条怎样加上去的，就是底部那固定的信息条 有腾讯和新浪微博，还有feed那个。

                              • 末鱼
                                末鱼 2
                                甘肃省兰州市 12F
                                回复

                                鸟哥，这个该如何在你的主题上面使用呢？新手有点看不懂，麻烦指点下哦。

                                • 高辉祥
                                  高辉祥 0
                                  香港 13F
                                  回复

                                  如何取消 右下角的气泡提示 ？？？
                                  [ 鼠标移动到链接上出现的提示说明。]

                                匿名

                                发表评论

                                匿名网友
                                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                拖动滑块以完成验证