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

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

sweettitles.jpg

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

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

  1. /*
  2. Sweet Titles
  3. jquery code by Leeiio: http://leeiio.me/
  4. modified by Jasper: http://www.yzmb.me/
  5. 2009/12/8
  6. */
  7. var sweetTitles = {
  8.     tipElements: "a",
  9.     init: function() {
  10.         $(this.tipElements).mouseover(function(e) {
  11.             this.myTitle = this.title;
  12.             this.myHref = this.href;
  13.             this.myHref = (this.myHref.length > 61 ? this.myHref.toString().substring(0, 50) + "...": this.myHref);//这行第一个数字61看你的url长度自行调试，太短显不出中文字符；第二个数字表示url超过50个字符的部分用...代替，比第一个数字小才有效
  14.             this.title = "";
  15.             mouse(e);//计算坐标并自适应显示
  16.             var tooltip = "

    " + this.myTitle + "" + decodeURI(this.myHref) + "" + "

    " + this.myTitle + "" + decodeURI(this.myHref) + "" + "

    " + this.myTitle + "" + decodeURI(this.myHref) + "" + "

    " + this.myTitle + "" + decodeURI(this.myHref) + "" + "

    "    ;
  17.             $('body').append(tooltip);//添加url中文字符转义和四个角度的显示层
  18.             $('#tooltip').css({
  19.                 "opacity": "0.8",
  20.                 "top": (toppos) + "px",
  21.                 "left": (leftpos) + "px"// 0.8透明度可自行调节
  22.  
  23.             }).show('fast');
  24.  
  25.         }).mouseout(function() {
  26.             this.title = this.myTitle;
  27.             $('#tooltip').remove();
  28.  
  29.         }).mousemove(function(e) {
  30.             mouse(e);//计算坐标并自适应显示
  31.             $('#tooltip').css({
  32.                 "top": (toppos) + "px",
  33.                 "left": (leftpos) + "px"
  34.  
  35.             });
  36.  
  37.         });
  38.         ////计算坐标并控制浏览器边界自适应显示的函数
  39.         var poptopset = 0;
  40.         var mouse = function(e) {
  41.             if (e.pageY + 40 > document.body.clientHeight) {
  42.                 poptopset = -50;//调节上下自适应层显示距离
  43.                 $('#poptop').css({
  44.                     "display": "none"
  45.                 });
  46.                 $('#popbot').css({
  47.                     "display": ""
  48.                 });
  49.  
  50.             } else {
  51.                 poptopset = 0;
  52.                 $('#poptop').css({
  53.                     "display": ""
  54.                 });
  55.                 $('#popbot').css({
  56.                     "display": "none"
  57.                 });
  58.  
  59.             }
  60.             if (e.pageX + 20 > document.body.clientWidth) {
  61.                 popleftset = -150;//调节左右自适应层显示距离
  62.                 $('#topleft').css({
  63.                     "display": "none"
  64.                 });
  65.                 $('#botleft').css({
  66.                     "display": "none"
  67.                 });
  68.                 $('#topright').css({
  69.                     "display": ""
  70.                 });
  71.                 $('#botright').css({
  72.                     "display": ""
  73.                 });
  74.  
  75.             } else {
  76.                 popleftset = 0;
  77.                 $('#topleft').css({
  78.                     "display": ""
  79.                 });
  80.                 $('#botleft').css({
  81.                     "display": ""
  82.                 });
  83.                 $('#topright').css({
  84.                     "display": "none"
  85.                 });
  86.                 $('#botright').css({
  87.                     "display": "none"
  88.                 });
  89.  
  90.             }
  91.             toppos = e.pageY + 20 + document.body.scrollTop + poptopset;
  92.             leftpos = e.pageX + 10 + document.body.scrollLeft + popleftset;
  93.  
  94.         }
  95.  
  96.     }
  97.  
  98. };
  99. $(function() {
  100.     sweetTitles.init();
  101.  
  102. });

这样中文链接完美显示，底部等边界链接提示层会自动调整。注意点击下载并上传引用该js文件后，还要添加一段css代码让它去控制，如下：

  1. #tooltip {
  2.     position: absolute;
  3.     z-index: 1000;
  4.     max-width: 250px;
  5.     word-wrap: break - word;
  6.     background: #000;
  7.     text-align: left;
  8.     min-height: 1em;
  9.     padding: 3px;
  10. }
  11. #tooltip p {
  12.     color: #fff;
  13.     font: 12px 'Microsoft YaHei',
  14.     Arial,
  15.     Tahoma,
  16.     Sans-Serif;
  17. }
  18. #tooltip p em {
  19.     display: block;
  20.     margin-top: 1px;
  21.     color: #f70;
  22.     font-style: normal
  23. }

喜欢圆角效果的去收Leeiio那里的css，还有别忘了引用jquery库文件——这样就OK了！<(￣︶￣)>

头两弹介绍了两个经典套装效果，接下来羽中会放出一些个性化的小玩意儿供大家学习和选用，欢迎继续关注《精彩模版小高招》下一弹~~

(Last modified: 2010-12-29 13:43)