鼠標(biāo)移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下

這里選取的例子，便是 WordPress 中比較有名的美化超鏈接Title效果，一般的 title 效果是把鼠標(biāo)放到 a 元素中便會顯示一個黃底色框，而且是延時顯示，這樣顯然不是一個好的 UE ，所以美化的 Title 便誕生了，在本站現(xiàn)在的主題 Line 的側(cè)邊欄中把鼠標(biāo)放到文章標(biāo)題便顯示文章摘要的功能便是使用美化 Title 的原理做的，之所以選取這個例子，一是該例子中很好的體現(xiàn)了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比較常用，可以供需要做美化 Title 的人理解其中的原理。同時因?yàn)橹皩?DOM 和美化 Title 有所研究，因此這篇筆記的內(nèi)容將會敘述得更加豐富！

美化 Title 的效果很簡單，需要的是鼠標(biāo)移動到超鏈接的那一刻就出現(xiàn) Title 提示，當(dāng)然也可以適當(dāng)添加一些css作美化之用，以配合自己的主題。

首先寫一段 Html 作為演示

<div id="newtitle">

  <h2>美化Title</h2>

  <ul>

    <li><a href="#" title="這是Title1">Title1</a></li>

    <li><a href="#" title="這是Title2">Title2</a></li>

    <li><a href="#" title="這是Title3">Title3</a></li>

    <li><a href="#" title="這是Title4">Title4</a></li>

    <li><a href="#" title="這是Title5">Title5</a></li>

    <li><a href="#" title="這是Title6">Title6</a></li>

    <li><a href="#" title="這是Title7">Title7</a></li>

    <li><a href="#" title="這是Title8">Title8</a></li>

  </ul>

</div>

接著我們需要完成兩件事，一是當(dāng)鼠標(biāo)滑入超鏈接時創(chuàng)建一個內(nèi)容為 title 內(nèi)容的 div ，而是當(dāng)鼠標(biāo)滑出超鏈接時移除該 div 。

這時顯然需要用到 mouse 方法，在這里選用 mouseover 與 mouseout ，或是 mouseenter 與 mouseleave 。說到這里小插一段，科普推廣一下上面兩組方法的區(qū)別：

上面兩組方法的功能均是當(dāng)鼠標(biāo)懸停在某網(wǎng)頁元素上時觸發(fā)事件，不同的是， mouseover 與 mouseout 會同時綁定到該元素的子元素上，因此如果一個網(wǎng)頁元素內(nèi)有多個子元素時很有可能會發(fā)生在元素上一移動鼠標(biāo)就會觸發(fā)事件的情況。于是從 jQuery 1.3 開始便增加了兩個新的 mouse 方法—— mouseenter 與 mouseleave ，使用 mouseenter 與 mouseleave 并不影響子元素。因?yàn)樵谏厦娴睦又校x取的網(wǎng)頁元素是 a 標(biāo)簽，一般不會有子元素，所以用上面兩組方法均可。

回到我們需要完成的第一步——創(chuàng)建 div 。把內(nèi)容追加到文檔中可以使用 append() ，追加的內(nèi)容為超鏈接的 title ，可以直接獲取 title 屬性值，為了使追加的 div 顯示在該超鏈接旁邊，還可以使用 css() ，當(dāng)然在這之前要先設(shè)置插入的 div 的 css —— position: absolute; 而第二步從文檔中移除元素可以使用 remove() 方法。具體的代碼如下：

$(function(){

  //為提示框預(yù)設(shè)一定的top和left值，以免提示框與超鏈接的距離太近

  var x = 15;

  var y = 15;

  $("#newtitle a").mouseenter(function(e){

      //記錄title，以便下面清空title后能重新獲取title的值

      this.myTitle = this.title; 

      this.title = "";

      var beatitle = "<div id='beatitle'>"+this.myTitle+"</div>";

      $("#newtitle").append(beatitle);

      $("#beatitle")

        .css({

          "opacity":"0.6",

          "top": (e.pageY+y) + "px",

          "left": (e.pageX+x) + "px"

          }).show("fast");

  }).mouseleave(function(){

      this.title = this.myTitle;

      $("#beatitle").remove();

  });

})

這時美化 Title 的效果基本已經(jīng)完成了，只要使用 mousemove() 方法使美化的 Title 跟著鼠標(biāo)移動，同時可以加一段小代碼使美化 Title 中顯示超鏈接的 URL ，這個可以根據(jù)個人喜好加進(jìn)去，本人個人對這個效果無愛了，喜歡的童鞋可以使用下面的完整代碼！

$(function(){

  var x = 15;

  var y = 15;

  //為提示框預(yù)設(shè)一定的top和left值，以免提示框與超鏈接的距離太近

  $("#newtitle a").mouseenter(function(e){

      //記錄title，以便下面清空title后能重新獲取title的值

      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 beatitle = "<div id='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</div>";

      $("#newtitle").append(beatitle);

      $("#beatitle")

        .css({

          "opacity":"0.6",

          "top": (e.pageY+y) + "px",

          "left": (e.pageX+x) + "px"

          }).show("fast");

  }).mouseleave(function(){

      this.title = this.myTitle;

      $("#beatitle").remove();

  }).mousemove(function(e){

      $("#beatitle")

        .css({

          "top": (e.pageY+y)+"px",

          "left": (e.pageX+x)+"px"

        });

  });

})

具體的效果也可以看demo 噢！

最后附上 css ，各位童鞋可以根據(jù)自己的主題修改！

body {font-size: 12pt; color: #99CC33; }

h2 {font-size: 14pt; }

ul {list-style: none; padding: 0 0 0 10px;}

ul li {margin-bottom: 5px; }

a {text-decoration: none; color: #99CC33; }

#beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; }

#beatitle span {display: block; color: #FF9900; }

相信各位童鞋看了上面的原理和代碼應(yīng)該也猜到我的側(cè)邊欄里的摘要提示是怎么做的了！就是在超鏈接的 title 中添加內(nèi)容截斷了，這里跟大家分享我的截斷代碼，有興趣的果斷折騰吧！

代碼如下:

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 240,'...'); ?>">

好了，我們再來更加完整地總結(jié)一下實(shí)現(xiàn)title提示的核心代碼：

/*

調(diào)用示例：

$(document).ready(function(){

$('.quicktip').quberTip({

 speed:200

});

});

<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>

*/

jQuery.fn.quberTip = function (options) {

  var defaults = {

    speed: 500,

    xOffset: 10,

    yOffset: 10

  };

  var options = $.extend(defaults, options);

  return this.each(function () {

    var $this = jQuery(this);

    if ($this.attr('title') != undefined) {

      //Pass the title to a variable and then remove it from DOM

      if ($this.attr('title') != '') {

        var tipTitle = ($this.attr('title'));

      } else {

        var tipTitle = 'QuberTip';

      }

      //Remove title attribute

      $this.removeAttr('title');

      $(this).hover(function (e) {

        //      $(this).css('cursor', 'pointer');

        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");

        $("#tooltip").css({ "position": "absolute",

          "z-index": "9999",

          "background": "#D3DDF5",

          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",

          "padding": "5px",

          "opacity": "0.9",

          "border": "1px solid #A3C0E8",

          "-moz-border-radius": "3px",

          "border-radius": "3px",

          "-webkit-border-radius": "3px",

          "font-weight": "normal",

          "font-size": "12px",

          "display": "none"

        });

        $("#tooltip")

.css("top", (e.pageY + defaults.xOffset) + "px")

      .css("left", (e.pageX + defaults.yOffset) + "px")

      .fadeIn(options.speed);

      }, function () {

        //Remove the tooltip from the DOM

        $("#tooltip").remove();

      });

      $(this).mousemove(function (e) {

        $("#tooltip")

  .css("top", (e.pageY + defaults.xOffset) + "px")

  .css("left", (e.pageX + defaults.yOffset) + "px");

      });

    }

  });

};