jQuery 放大鏡效果詳解

admin發表於2019-02-14
jQuery

放大鏡效果在很多網站都在使用，尤其在圖片型別網站或者購物網站。

當然實現放大鏡效果的方式有多種，這裡僅僅是提供一種思路。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.box{
  position:relative;
  margin:10px auto;
  padding:10px;
  border:1px solid #666;
  background:#CCC;
  width:250px;
}
.box .small{
  position:relative;
  text-align:center;
  background:#FFF;
  height:167px;
}
.box .small .mark{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:80px;
  height:80px;
  background:#FFFFFF;
  filter:alpha(opacity:50); 
  opacity:0.5;
  border:1px solid #333;
  display:none;
}
.box .big{
  position:absolute;
  left:0;
  top:0;
  display:none;
} 
.boxbig{
  position:absolute;
  left:275px;
  top:0;
  width:160px;
  height:160px;
  overflow:hidden;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var mouseX = 0; 
  var mouseY = 0;  
  var maxLeft = 0; 
  var maxTop = 0; 
  var markLeft = 0; 
  var markTop = 0; 
  var perX = 0; 
  var perY = 0; 
  var bigLeft = 0; 
  var bigTop = 0; 
   
  function updataMark($mark){
    if(markLeft<0){
      markLeft = 0;
    }
    else if(markLeft>maxLeft){
      markLeft=maxLeft;
    }
    if(markTop<0){
      markTop=0;
    }
    else if(markTop>maxTop){
      markTop=maxTop;
    }
   
   perX=markLeft/$(".small").outerWidth();
   perY=markTop/$(".small").outerHeight();
   
   bigLeft=-perX*$(".big").outerWidth();
   bigTop=-perY*$(".big").outerHeight();
   
    //設定小框的位置
    $mark.css({"left":markLeft,"top":markTop,"display":"block"});
  }
 
  //改變大圖的位置
  function updataBig(){
    $(".big").css({"display":"block","left":bigLeft,"top":bigTop});
  }
 
  //滑鼠移出時
  function cancle(){
    $(".big").css({"display":"none"}); 
    $(".mark").css({"display":"none"});
  }
 
  //滑鼠小圖上移動時
  function imgMouseMove(event){  
   var $this = $(this);
   var $mark = $(this).children(".mark");
     
   //滑鼠在小圖的位置
   mouseX=event.pageX-$this.offset().left - $mark.outerWidth()/2;
   mouseY=event.pageY-$this.offset().top - $mark.outerHeight()/2;
   
    //最大值
    maxLeft=$this.width()-$mark.outerWidth();
    maxTop=$this.height()-$mark.outerHeight();
    markLeft=mouseX;
    markTop=mouseY;
   
    updataMark($mark);
    updataBig();
  }
  $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})
</script>
</head>
<body>
<div class="box">
  <div class="small">
   <span class="mark"></span>
   <img src="mytest/jQuery/1_s.jpg" alt="" />
  </div>
  <div class="boxbig">
   <div class="big"><img src="mytest/jQuery/1_b.jpg" alt="" /></div>
  </div>
</div>
</body>
</html>

一.實現原理:

原理特別的簡單，兩張等比例的圖片，一張是小圖，一張是大圖，當滑鼠在小圖中移動的時候會出現一個半透明的遮罩圖片，用來標識要放大的區域，這個時候就根據相應的比例，在另一個區域調整大圖的left和top屬性值，來顯示相應的位置，原理大致如此，具體可以參閱程式碼註釋，再加以思考，應該很容易弄明白。

二.程式碼註釋:

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

（2）.var mouseX=0，宣告一個變數用來存放半透明遮罩框的左邊緣距離small元素的距離。

（3）.var mouseY=0，宣告一個變數用來存放半透明遮罩框的上邊緣距離small元素的距離。

（4）.var maxLeft=0，宣告一個變數用來存放半透明遮罩框左邊緣距離samll元素的最大距離。

（5）.var maxTop=0,宣告一個變數用來存放半透明遮罩框的上邊緣距離small元素的最大距離。

（6）.var markLeft=0，用來存放mouseX值。

（7）.var markTop=0，用來存放mouseY值。

（8）.var perX=0，用來存放mouseX與samll元素寬度的比例。

（9）.var perY=0，用來存放mouseY與samll元素高度的比例。

（10）.var bigLeft=0，用來存放big元素left屬性值。

（11）.var bigTop=0，用來存放big元素的top屬性值。

（12）.function updataMark($mark){}，此函式可以控制辦透明遮罩層的位置，引數為半透明物件。

（13）.if(markLeft<0){markLeft = 0;}，如果半透明遮罩框左邊緣超出small元素的左邊緣，則將markLeft值設定為0，也就是讓半透明遮罩層貼在samll元素內壁上。

（14）.else if(markLeft>maxLeft){markLeft=maxLeft;}，如果半透明遮罩層右邊緣超出small元素的右邊緣，則將markLeft設定為maxLeft，也就是讓半透明遮罩層貼在small元素的右側內壁。

（15）.perX=markLeft/$(".small").outerWidth()，可以計算出半透明遮罩層在small元素中向左移動的尺寸佔small元素寬度的比例，使用這個值再乘以大圖的尺寸就可以計算出大圖相應的移動尺寸，這樣可以確保放大位置和右側出現的放大位置對應。

（16）.perY=markTop/$(".small").outerHeight()，和上面同樣的道理。

（17）.bigLeft=-perX*$(".big").outerWidth()，計算出big元素左移的尺寸，其實也就是圖片左移的尺寸。

（18）.bigTop=-perY*$(".big").outerHeight(),和上面同樣的道理。

（19）.$mark.css({"left":markLeft,"top":markTop,"display":"block"})，設定半透明遮罩框的位置，並將其設為可見。

（20）.function updataBig(){}，設定big元素的定位座標。

（21）.$(".big").css({"display":"block","left":bigLeft,"top":bigTop})，設定big元素的left和top屬性值，並將其設定為可見。

（22）.function cancle(){}，規定當滑鼠移出時的操作。

（23）.$(".big").css({"display":"none"})，將big設定為隱藏。

（24）.$(".mark").css({"display":"none"})，將半透明遮罩層設定為隱藏。

（25）.function imgMouseMove(event){}，當滑鼠移動時，用來設定遮罩層的座標。

（26）.var $this=$(this)，滑鼠移動所在的物件。

（27）.var $mark=$(this).children(".mark")，獲取半透明遮罩框物件。

（28）.mouseX=event.pageX-$this.offset().left-$mark.outerWidth()/2，設定半透明遮罩框的左邊緣距離samll元素的距離，使用這種方式也可以將滑鼠指標位於遮罩框水平中心位置。

（29）.mouseY=event.pageY-$this.offset().top-$mark.outerHeight()/2，和上面同樣的道理。

（30）.maxLeft=$this.width()-$mark.outerWidth()，獲取半透明遮罩框左邊緣距離samll元素的最大距離。

（31）.maxTop=$this.height()-$mark.outerHeight()，半透明遮罩框的上邊緣距離small元素的最大距離。

（32）.$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle)，事件處理函式的繫結。

三.相關閱讀:

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

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

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

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

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

（6）.outerHeight()參閱jQuery outerHeight()方法一章節。

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

（8）.height()參閱jQuery height()方法一章節。

相關文章