滑鼠懸浮連結彈出說明層

admin發表於2019-01-25

超連結<a>有一個title屬性，當滑鼠表懸浮於連結上時，顯示title的屬性值，雖然在一定程度上滿足了我們的需要，但是美觀度較低，並且無法修改它的樣式，下面就來介紹一下如何利用jQuery模擬實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var x = 7; 
  var y = 8; 
  $("a.tip").hover(function(){ 
    var title=this.title; 
    var $div=$("<div id='newTip'>"+title+"</div>"); 
    $(this).append($div); 
        $(this).css({"position":"relative"}); 
    $div.css({"position":"absolute","background":"pink"}); 
        $div.css({"width":"120px","height":"30px"}); 
  },function(){ 
    $("#newTip").remove(); 
  }).mousemove(function(e){ 
    var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); 
  }); 
}) 
</script> 
</head> 
<body> 
<a href="#" class="tip" title="螞蟻部落歡迎您">螞蟻部落</a> 
</body> 
</html>

當滑鼠懸浮於連結之上的時候，能夠出現文字說明並且能夠跟隨滑鼠移動。

一.程式碼註釋:

（1）.$(function(){))，當穩當結構完全載入完畢再去執行函式中的程式碼。

（2）.var x = 7，var y = 8，宣告兩個變數用來定義滑鼠指標和彈出的層的橫向和縱向距離。

（3）.$("a.tip").hover(function(){ },function(){})，為指定的連結新增滑鼠懸浮和滑鼠離開時要執行的函式。

（4）.var title=this.title，將當前連結的title屬性值賦值給變數title。

（5）.var $div=$("<div id='newTip'>"+title+"</div>")，建立一個jquery物件，其實就是div中放入title屬性值，這個也就是要彈出的層。

（6）.$(this).append($div)，將建立的div新增到當前連結<a>中。

（7）.$(this).css({"position":"relative"})，將超連結a設定為相對定位，因為彈出層是絕對定位，那麼定位參考物件就可以是連結a了。

（8）. $div.css({"position":"absolute","background":"pink"})，將div的設定為絕對定位，背景顏色為粉色。

（9）.$div.css({"width":"120px","height":"30px"})，設定div的尺寸。

（10）.$("#newTip").remove()，刪除指定id的元素，這裡就是刪除彈出的div。

（11）.mousemove(function(e){})，註冊mousemove事件處理函式，當然這裡採用的是鏈式呼叫。

（12）.var $div = $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'})，設定彈出div的left和top屬性值，實現跟隨效果。

二.相關閱讀:

（1）.hover()參閱jQuery hover事件一章節。 

（2）.this參閱JavaScript this用法一章節。 

（3）.append()參閱jQuery append()方法一章節。 

（4）.css()參閱jQuery css()方法一章節。 

（5）.remove()函式jQuery remove()方法一章節。

（6）.mousemove事件參閱jQuery mousemove事件一章節。 

（7）.e.pageX參閱jQuery event.pageX屬性一章節。 

（8）.相對定位參閱CSS 相對定位一章節。

（9）.絕對定位參閱CSS 絕對定位一章節。

相關文章