這篇文章給大家分享的是有關(guān)js如何自制圖片放大鏡功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

注釋：small img size：600x400
big img size：1200x800

原理：1、大圖是小圖的 2倍整
2、大圖以小圖片中心點為中心
      a.transform : translate(-50%,-50%)
      b.(rate-0.5)*50%
      c.clip : rect(t,r,b,l) 以小圖邊界為邊界
3、rect必須有absolute
4、獲取鼠標(biāo)在圖片中的位置
     a.獲取鼠標(biāo)位置 XY
     b.獲取圖片位置、寬度、高度
             i.得到鼠標(biāo)在圖片的百分比位置
             ii.將百分比位置應(yīng)用于大圖 left，top

問題：
居中理解太差：
          absolute ,left ,top,right,bottom,margin
放大縮小問題：
           起初： transform： scale() 縮放
           利用 transition 過渡
                 結(jié)果，采用這種方法會使得鼠標(biāo)移動時很卡頓
                       可能原因：每次hover 都會觸發(fā) transition事件
           解決方法：采用了 Animate 動畫來實現(xiàn)縮放

細節(jié)：以 onmouse 事件 e 動態(tài)獲得 e.pageX 和 e.pageY
以 $().offset().top /left 獲取圖片位置
以 $().width() /height() 獲取圖片寬高
      在錯誤的操作中也忘了獲取 class 的方法
           $().attr("class")
           $().prop("class")
                    event.traget.className 

如果要實現(xiàn) hover出現(xiàn) 透明的塊狀就在外部 opacity:0.5; 設(shè)置z-index就可以了。

 
  
  
  
  
  
  
   #warpper{
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    width: 600px;
    height: 400px;
   }
   .small{
    text-align: center;
   }
   .big{
    display: none;
    clip: rect(200px,900px,600px,300px);
    position: absolute;
    width: 1200px;
    height: 800px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
   }
   .big img{
    position: absolute;
    width: 600px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
   }