jQuery跟隨滑鼠移動的彈出層效果

admin發表於2017-10-31
jQuery

現在網站都追求人性化，很多時候當滑鼠懸浮的時候，能夠彈出一個層，並且此層能夠跟隨滑鼠移動，此功能一般常見於標題內容提示，或者彈出大圖效果，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  height:40px;
  line-height:40px;
  list-style:none;
}
#tooltip{ 
  position:absolute; 
  border:1px #solid #333; 
  background:#f7f5d1; 
  padding:1px; 
  color:#333; 
  display:none; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function (){ 
  var x = 10; 
  var y = 10; 
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title; 
    this.title = ""; 
    var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; 
    $("body").append(tooltip); 
    $("#tooltip").css({ 
      "top": (e.pageY + y) + "px", 
      "left": (e.pageX + x) + "px" 
    }).show("fast"); 
  }).mouseout(function (){
    this.title = this.myTitle; 
    $("#tooltip").remove(); 
  }).mousemove(function (e){
    $("#tooltip").css({ 
      "top": (e.pageY + y) + "px", 
      "left": (e.pageX + x) + "px" 
    }); 
  }); 
}) 
</script> 
</head>
<body>
<ul> 
  <li><a href="#" class="tooltip" title="螞蟻部落歡迎您">螞蟻部落一</a></li> 
  <li><a href="#" class="tooltip" title="分享和互助是最大的胸懷">螞蟻部落二</a></li> 
</ul> 
</body>
</html>

當滑鼠懸浮可以彈出跟隨滑鼠移動的層效果，下面就介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var x = 10，var y = 10，宣告兩個變數並賦值，它的作用規定，滑鼠指標和彈出層在水平方向和垂直方向上的距離。

（3）.$("a.tooltip").mouseover(function(e){})，為具有class屬性值為tooltip的a元素註冊mouseover事件處理函式。

（4）.this.myTitle = this.title，獲取當前滑鼠懸浮的連結元素的title屬性值，並賦值給自定義屬性myTitle 。

（5）.this.title = ""，將當前連結a物件的title屬性值情況，之所以這樣，是防止當滑鼠懸浮的時候出現連結自帶的title效果。

（6）.var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"，一個html字串，這個就是彈出層的結構。

（7）.$("body").append(tooltip)，將彈出層div新增到body。

（8）.$("#tooltip").css({})，設定此彈出層的樣式屬性值。

（9）."top": (e.pageY + y) + "px"，設定div的top屬性值，也就是滑鼠指標在文件中的垂直座標加上預定的y值。

（10）."left": (e.pageX + x) + "px"，設定div的left屬性值，也就是滑鼠指標在文件中的水平座標加上預定的x值。

（11）.show("fast")，以動畫方式展現彈出層，這裡當然是利用的鏈式呼叫。

（12）.mouseout(function (){})，為具有class屬性值為tooltip的a元素註冊mouseout事件處理函式。

（13）.this.title = this.myTitle，還原連結a的title屬性值。

（14）.$("#tooltip").remove()，移出彈出層。

（15）.mousemove(function (e){})，為具有class屬性值為tooltip的a元素註冊mousemove事件處理函式，這裡就是實現跟隨效果。

二.相關閱讀:

（1）.mouseover事件參閱jQuery mouseover事件一章節。

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

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

（4）.pageY參閱jQuery event.pageY屬性一章節。 

（5）.show()參閱jQuery show()方法一章節。 

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

（7）.remove()參閱jQuery remove()方法一章節。 

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

相關文章