本文實(shí)例講述了JQuery實(shí)現(xiàn)超鏈接鼠標(biāo)提示效果的方法。分享給大家供大家參考。具體分析如下：

瀏覽器其實(shí)已經(jīng)自帶了超鏈接提示，只需在超鏈接中加入title屬性就可以了。但是這個(gè)提示效果的響應(yīng)速度是非常緩慢的，大概要延遲1秒左右啊。我們現(xiàn)在需要的是當(dāng)鼠標(biāo)移動(dòng)到超鏈接的那一瞬間就出現(xiàn)提示。這時(shí)就需要移除a標(biāo)簽中的title提示效果，自己動(dòng)手做一個(gè)類似功能的提示。

HTML設(shè)計(jì)如下：

然后為class為tooltip的超鏈接添加mouseover和mouseout事件：

$("a.tooltip").mouseover(function (){  
    //顯示 title  
}).mouseout(function (){  
    //隱藏 title  
});

實(shí)現(xiàn)這個(gè)效果的具體思路如下：

1. 當(dāng)鼠標(biāo)滑入超鏈接時(shí)， 創(chuàng)建一個(gè)div元素，div元素的內(nèi)容為title屬性的值。然后將創(chuàng)建的元素追加到文檔中。為它設(shè)置x坐標(biāo)和y坐標(biāo)，使它顯示在鼠標(biāo)位置的旁邊。
2. 當(dāng)鼠標(biāo)滑出超鏈接時(shí)，移除div元素。

根據(jù)分析的思路，寫(xiě)出如下JQuery代碼：

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //創(chuàng)建 div 元素  
    $("body").append(tooltip); //把它追加到文檔中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

此時(shí)的效果有兩個(gè)問(wèn)題：首先是當(dāng)鼠標(biāo)滑過(guò)后，a標(biāo)簽中的title屬性的提示也會(huì)出現(xiàn)：其次是設(shè)置x坐標(biāo)和y坐標(biāo)的問(wèn)題，由于自制的提示與鼠標(biāo)的距離太近，有時(shí)候會(huì)引起無(wú)法提示的問(wèn)題（鼠標(biāo)焦點(diǎn)變化引起mouseout事件）。

為了移除a標(biāo)簽中的title提示功能，需要進(jìn)行以下幾個(gè)步驟：

1. 當(dāng)鼠標(biāo)滑入時(shí)，給對(duì)象添加一個(gè)新屬性，并把title的值傳給這個(gè)屬性，然后清空屬性title的值。

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//創(chuàng)建 div 元素

2. 當(dāng)鼠標(biāo)滑出時(shí)，再把對(duì)象的myTitle屬性的值又賦給屬性title。

為什么當(dāng)鼠標(biāo)滑出時(shí)，要把屬性值又賦給屬性title呢？因?yàn)楫?dāng)鼠標(biāo)滑出時(shí)，需要考慮再次滑入時(shí)的屬性title值，如果不將myTitle的值重新賦給title屬性，當(dāng)再次滑入時(shí)，title的值就為空了。

為了解決第2個(gè)問(wèn)題，需要重新設(shè)置提示元素的top和left的值，代碼如下所示，為top增加了10px，為left增加了20px：

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

OK，到這里問(wèn)題都解決了，鼠標(biāo)超鏈接提示效果實(shí)現(xiàn)。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論