精彩模版小高招第二弹—Sweet Titles链接提示

╭(￣＾￣)m☆! 书接上回~(单田芳味儿…)既然都请来了强悍的jquery库，只用个lavalamp好像有点浪费，还有什么好看实用的东东可以装点呢？今天给大家介绍另一个经典js特效：Sweet Titles——“甜题”！。。又译“香标”~ (我想水果了﹏﹏ = (＃￣▽￣))

【第二弹！Sweet Titles链接提示】

Sweet Titles实际上是早于jquery就有的一个js效果，创始人为Dustin Diaz(迪亚兹之尘…)。同其他旧有js前端效果一样，原始的Sweet Titles代码繁多，且在兼容性方面有所欠缺。这里就要特别感谢国内的Leeiio同学啦，他在引进Sweet Titles时使用jquery进行了重写，大大减少了代码数量(仅870字节)，不仅提高了运算效率，兼容和扩展性方面也增强了。

我的博客风格比较简炼含蓄，这种链接提示正好可以弥补浏览者的体验不足，英文title帮助国外访客的方法也可以得到加强。但是实际使用后还是发现了两个问题：一是不支持链接中出现中文字符，如标签(tag)提示总带着%串码很别扭；二是提示层固定于鼠标右下角，浏览器边界如底部附近的链接提示就看不到了，不太方便。于是乎我也做了番研究，成功把这两个问题改进掉了~ 废话少叙，大家看码……如有更好的方法也欢迎交流共享;)

/*
Sweet Titles
jquery code by Leeiio: http://leeiio.me/
modified by Jasper: http://www.yzmb.me/
2009/12/8
*/
var sweetTitles = {
tipElements: "a",
init: function() {
$(this.tipElements).mouseover(function(e) {
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 61 ? this.myHref.toString().substring(0, 50) + "...": this.myHref);//这行第一个数字61看你的url长度自行调试，太短显不出中文字符；第二个数字表示url超过50个字符的部分用...代替，比第一个数字小才有效
this.title = "";
mouse(e);//计算坐标并自适应显示
var tooltip = "
" + this.myTitle + "" + decodeURI(this.myHref) + "" + "
" + this.myTitle + "" + decodeURI(this.myHref) + "" + "
" + this.myTitle + "" + decodeURI(this.myHref) + "" + "
" + this.myTitle + "" + decodeURI(this.myHref) + "" + "
";
$('body').append(tooltip);//添加url中文字符转义和四个角度的显示层
$('#tooltip').css({
"opacity": "0.8",
"top": (toppos) + "px",
"left": (leftpos) + "px"// 0.8透明度可自行调节
}).show('fast');
}).mouseout(function() {
this.title = this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e) {
mouse(e);//计算坐标并自适应显示
$('#tooltip').css({
"top": (toppos) + "px",
"left": (leftpos) + "px"
});
});
////计算坐标并控制浏览器边界自适应显示的函数
var poptopset = 0;
var mouse = function(e) {
if (e.pageY + 40 > document.body.clientHeight) {
poptopset = -50;//调节上下自适应层显示距离
$('#poptop').css({
"display": "none"
});
$('#popbot').css({
"display": ""
});
} else {
poptopset = 0;
$('#poptop').css({
"display": ""
});
$('#popbot').css({
"display": "none"
});
}
if (e.pageX + 20 > document.body.clientWidth) {
popleftset = -150;//调节左右自适应层显示距离
$('#topleft').css({
"display": "none"
});
$('#botleft').css({
"display": "none"
});
$('#topright').css({
"display": ""
});
$('#botright').css({
"display": ""
});
} else {
popleftset = 0;
$('#topleft').css({
"display": ""
});
$('#botleft').css({
"display": ""
});
$('#topright').css({
"display": "none"
});
$('#botright').css({
"display": "none"
});
}
toppos = e.pageY + 20 + document.body.scrollTop + poptopset;
leftpos = e.pageX + 10 + document.body.scrollLeft + popleftset;
}
}
};
$(function() {
sweetTitles.init();
});