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文件应该也要更新啊