以WordPress為例講解jQuery美化頁面Title的方法

更新時間：2016年05月23日 15:18:14 作者：Kayo Lee

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

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

美化 Title 的效果很簡單，需要的是鼠標移動到超鏈接的那一刻就出現(xiàn) Title 提示，當然也可以適當添加一些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>

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

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

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

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

$(function(){
  //為提示框預設一定的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 跟著鼠標移動，同時可以加一段小代碼使美化 Title 中顯示超鏈接的 URL ，這個可以根據(jù)個人喜好加進去，本人個人對這個效果無愛了，喜歡的童鞋可以使用下面的完整代碼！

$(function(){
  var x = 15;
  var y = 15;
  //為提示框預設一定的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; }

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

復制代碼代碼如下:

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

好了，我們再來更加完整地總結(jié)一下實現(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");
      });
    }
  });
};

您可能感興趣的文章:

jQuery
Title

JQuery中的ready函數(shù)沖突的解決方法
jQuery確實是一個提高前端開發(fā)效率的好框架（雖然很多大牛們都說它效率不咋地），但是用好它有時候并不容易，也許你也遇到過以下情況
2010-05-05
jQuery中height()方法用法實例
這篇文章主要介紹了jQuery中height()方法用法,以實例形式較為詳細分析了height()方法返回元素高度的用法與相關注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
Jquery顯示、隱藏元素以及添加刪除樣式
顯示、隱藏元素我們可以通過css來實現(xiàn)；添加刪除樣式我們可以通過js或jquery來實現(xiàn)，下面為大家講解的是使用jquery實現(xiàn)元素的顯示隱藏及樣式的添加與刪除
2013-08-08
Jquery 設置標題的自動翻轉(zhuǎn)
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標題及內(nèi)容摘要，而且是每次一條，有點類似csdn的滾動廣告。
2009-10-10
JQuery 文本框使用小結(jié)
JQuery 文本框使用小結(jié)，主要是事件的綁定，結(jié)合下js的用法。
2010-05-05
jQuery實現(xiàn)的文字hover顏色漸變效果實例
這篇文章主要介紹了jQuery實現(xiàn)的文字hover顏色漸變效果,以完整實例形式分析了jQuery實現(xiàn)文字顏色漸變效果的相關技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以參考下
2016-02-02
jquery垂直公告滾動實現(xiàn)代碼
公告滾動想必大家都有見到過吧，實現(xiàn)方法也有很多，下面為大家介紹使用jquery實現(xiàn)垂直公告滾動，感興趣的朋友不要錯過
2013-12-12
JQuery 改變頁面字體大小的實現(xiàn)代碼(實時改變網(wǎng)頁字體大小)
分別定義三個class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件
2012-03-03
jQuery 遍歷map()方法詳解
大家都知道m(xù)ap()方法主要用來遍歷操作數(shù)組和對象，這篇文章將給大家詳細介紹關于jQuery遍歷map()方法的內(nèi)容，文章給出了詳細的示例代碼，對大家的理解和學習很有幫助，有需要的朋友們下面來一起學習學習吧。
2016-11-11
jquery實現(xiàn)的超出屏幕時把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過taobao吧，在taobao的產(chǎn)品列表頁有一個浮動的用來排序的浮動層，當你拖動滾動條而導致那個排序欄看不到的時候它會自動變?yōu)楦訉?，一直固定在那里?/div> 2010-02-02