为WordPress网站上的链接添加一个醒目的提示

为Wordpress网站上的链接添加一个醒目的提示
wordpress

在Wordpres网站上,当鼠标移动到超链接,会浮现一个醒目的提醒,这是如何做的?

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

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

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

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

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

相关文章

Wordpress

在Wordpress网站的侧边养个宠物

2021-9-29 11:48:00

Wordpress

Windows主机升级WordPress 3.1出现重定向循环问题

2021-10-1 14:57:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索