原生JS實現圖片放大鏡插件

  前  言

　　咱們你們常常逛各類電商類的網站，商品的細節就須要用到放大鏡，這個你們必定不陌生，今天咱們就作一個圖片放大鏡的插件，來看看圖片是如何被放大的……

先看一下咱們要是實現的最終效果是怎麼樣的    ↓      

 

看完效果，你們有思路了嗎，沒有的話，咱們一塊兒來看一下是如何實現的~

1實現思路

① 要實現指上後放大的效果，須要作三個div，一個用來放原圖，另外一個用來放放大效果的div，最後一個是鼠標指上後須要放大部分的div（這個div咱們用p標籤來代替）。

② 肯定放大比例，最重要的一點，鼠標指上的div與放大效果的div，和原圖與放大圖的比例要相等。

③ 將鼠標指上後的放大效果顯示出來。

2具體實現步驟

 首先，咱們先來建三個div。

      <div id="wrapper"> 
         <!--小圖-->
        <div id="img_min"> 
              <!--圖片-->
              <img src="img/11.png" alt="min"> 
              <!--跟隨鼠標的白塊-->
              <p id="mousebg"></p> 
          </div> 
      <!--大圖-->
          <div id="img_max">
              <img id="img2_img" src="img/11.png" alt="max">
          </div> 
     </div> 

咱們HTML代碼部分已經所有完成，接下來，咱們用JS來實現功能：

給原圖添加三個事件，分別是，鼠標進入，鼠標移動，鼠標移出。

當鼠標移入原圖時，鼠標指上時的div和放大效果的div同時顯示。

         img1.onmouseover = function () { 
              //鼠標進入 
              img2.style.display = 'block'; 
              mousebg.style.display = 'block'; 
            
         }         

鼠標移出事件：

         img1.onmouseout = function () { 
              //鼠標離開 
              img2.style.display = 'none'; 
              mousebg.style.display = 'none'; 
         } 

重點是當鼠標移動時，根據p標籤與原圖的位置，來顯示大圖須要放大的部分。

        　　　 var _event = event||window.event;//兼容性處理 
              var mouseX = _event.clientX - img1.offsetLeft; 
              //計算鼠標相對與小圖的位置 
              var mouseY = _event.clientY  - img1.offsetTop; 

在作位置分析時，須要考慮四種臨界狀況：

就是當鼠標從圖片的上、下、左、右剛剛進入時，而且這個距離小於鼠標指上的div寬度的二分之一時，放大效果的div顯示出來，並不移動。

              //特殊狀況處理，分別靠近四條邊的時候 
              if(mouseX<mousebg.offsetWidth/2){ 
               mouseX = mousebg.offsetWidth/2; 
              } 
              if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
               mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
              } 
              if(mouseY<mousebg.offsetHeight/2){ 
               mouseY = mousebg.offsetHeight/2; 
              } 
              if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
               mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
              } 

最後，計算大圖的顯示範圍：

              //計算大圖的顯示範圍 
              img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
              img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
              //使鼠標在白塊的中間 
              mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
              mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px"; 

這樣，咱們用JS實現圖片放大鏡的插件就所有完成了~ 

若是有任何疑問，歡迎你們留言指正~