滑鼠懸浮小圖彈出大圖效果詳解

admin發表於2018-12-02

很多具有圖片列表的網站中，當滑鼠放在小圖上的時候能夠彈出一個大圖，並且當滑鼠在圖片上移動的時候，大圖也能夠隨著滑鼠指標運動，非常的人性化，也提高了網站的動態化效果，下面簡單介紹一下如何實現此效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的滑鼠懸停時放大圖片的效果製作</title>
<style>
* {
  margin:0;
  padding:0;
}
img{
  vertical-align:bottom;
  border:none;
}
body{
  background:#f0f0f0;
  height:800px;
  font-family:Arial;
}
ul {
  list-style:none;
}
h1{
  font-size:20px;
  width:680px;
  margin:3% auto 5px;
  color:#202020;
}
ul#gallery{
  width:660px;
  margin:0 auto 10px;
  padding-left:20px;
  border:1px solid #d3d3d3;
  background:#fff;
  overflow:hidden;
}
ul#gallery li{
  width:200px;
  height:200px;
  float:left;
  margin:20px 20px 20px 0;
  display:inline;
}
ul#gallery li a.smallimage{
  background:#333;
  display:block;
  width:200px;
  height:200px;
}
#bigimage{
  position:absolute;
  display:none;
}
#bigimage img{
  width:400px;
  height:400px;
  padding:5px;
  background:#fff;
  border:1px solid #e3e3e3;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
  var x = 22;
  var y = 20;
   
  $("a.smallimage").hover(function(e){
    $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');
    $(this).find('img').stop().fadeTo('slow',0.5);  
    widthJudge(e);
    $("#bigimage").fadeIn('fast');
  },function(){
    $(this).find('img').stop().fadeTo('slow',1);
    $("#bigimage").remove();
  }); 
  $("a.smallimage").mousemove(function(e){
    widthJudge(e);
  }); 
  function widthJudge(e){
    var marginRight = document.documentElement.clientWidth - e.pageX; 
    var imageWidth = $("#bigimage").width();
    if(marginRight < imageWidth){
      x = imageWidth + 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); 
    }
   else{
      x = 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});
    }; 
  }
})
</script>
</head>
<body>
<ul id="gallery">
<li>
  <a href="#" class="smallimage" rel="mytest/code/726/images/001_big.jpg">
   <img src="mytest/code/726/images/001_small.jpg" alt="" />
  </a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/002_big.jpg">
  <img src="mytest/code/726/images/002_small.jpg" alt="" />
</a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/003_big.jpg">
  <img src="mytest/code/726/images/003_small.jpg" alt="" />
</a>
</li>
</ul>
</body>
</html>

當滑鼠放在圖片上的時候可以出現大圖，當滑鼠在小圖中移動時，大圖也會跟隨者滑鼠指標運動。

一.實現原理:

當滑鼠放在圖片上的時候就會觸發小圖的hover事件，hover事件的處理函式可以為body新增p元素以控制大圖的顯示並且呼叫widthJudge()函式用以控制大圖的座標位置，當滑鼠離開的時候會移除新增的p元素使大圖消失。當滑鼠在小圖中移動的時候會觸發小圖的mousemove事件，此事件處理函式可以呼叫widthJudge()函式用以控制大圖的座標。

二.程式碼註釋:

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

（2）.var x = 22和var y = 20用來規定滑鼠指標距離大圖的距離。

（3）.$("a.smallimage").hover(function(e){}，為小圖繫結hover事件處理函式。關於hover事件可以參閱 jQuery的hover事件。

（4）.$("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>')，用於新增一個p元素，p中的圖片即是要顯示的大圖。大圖的src屬性值是當前小圖的rel屬性值。

（5）.$(this).find('img').stop().fadeTo('slow',0.5)，將小圖設定為半透明。

（6）.$("#bigimage").fadeIn('fast')顯示圖片。

（7）.$(this).find('img').stop().fadeTo('slow',1)將小圖恢復原樣。

（8）.$("#bigimage").remove()，移除新增的p元素，也就是隱藏大圖。

（9）.$("a.smallimage").mousemove(function(e){}，為小圖繫結mousemove事件處理函式以此呼叫widthJudge()函式。關於mousemove函式可以參閱jQuery mousemove事件。

（10）.function widthJudge(e){}，此事件用於控制圖片的位置，e是事件物件。

（11）.var marginRight = document.documentElement.clientWidth - e.pageX，用來計算滑鼠指標右半部可見區域的尺寸。

（12）.var imageWidth = $("#bigimage").width()，用來獲得大圖的寬度。

（13）.if(marginRight < imageWidth)用來判斷滑鼠指標右半部可見區域的尺寸是否小於大圖的寬度，如果小於的話則將圖片在滑鼠指標的左側顯示，否則在滑鼠指標的右側顯示。這基本就是一個數學邏輯問題。

相關文章