滑鼠懸浮彈出滑鼠跟隨層程式碼例項

admin發表於2017-04-07

本章節分享一段程式碼例項，它實現了滑鼠懸浮能夠彈出一個層，並且此層能夠跟隨滑鼠的移動。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#preview{
  width:300px;
  height:200px;
  border:5px solid darkgoldenrod;
  background:#ccc;
  color:#fff;
  padding:5px;
  display:none;
  position:absolute;
}
#hover{
  width:300px;
  height:200px;
  background:#ccc;
  text-align:center;
  line-height:200px;
  color:black;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  xOffset = 10;
  yOffset = 10;
 
  $("#hover").hover(function(e){
    $("#preview")
    .css('display', 'block')
    .css("top",(e.pageY + xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px")
    .fadeIn("slow");
  }, function(){
    $("#preview").fadeOut("fast");
  });
 
  $("#hover").mousemove(function(e){
    $("#preview")
    .css("top",(e.pageY + xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
  });
});
</script>
</head>
<body>
<div id="hover">滑鼠放在這裡</div>
<div id='preview'>jquery實現跟隨滑鼠移動的彈層</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.xOffset = 10和yOffset = 10，分別宣告變數並賦值為10，它規定了彈出層距離滑鼠指標水平和垂直距離。

（3）.$("#hover").hover(function(e){},function(e){})，為id屬性值為hover的元素註冊hover事件處理函式，其實就是規定滑鼠懸浮和滑鼠離開執行的函式。

（4）.css('display', 'block')，顯示彈出層。

（5）.css("top",(e.pageY + yOffset) + "px")，設定彈出層的top屬性值為滑鼠指標在文件中的垂直座標加上yOffset。

（6）.css("left",(e.pageX + xOffset) + "px")，和上面同樣的道理，不過是設定水平座標。

（7）.fadeIn("slow")，以動畫方式顯示元素。

（8）.$("#preview").fadeOut("fast")，滑鼠離開的時候彈出層以動畫方式隱藏。

（9）.$("#hover").mousemove(function(e){

  $("#preview")

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

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

})，設定當滑鼠指標移動時候，實現彈出層能夠跟隨效果。

二.相關閱讀:

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

（2）.css()可以參閱jQuery css()方法一章節。

（3）.e.pageY可以參閱jQuery event.pageY一章節。

（4）.fadeIn()可以參閱jQuery fadeIn()一章節。

（5）.fadeOut()可以參閱jQuery fadeOut()一章節。

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

相關文章