JS如何實現圖片放大鏡插件

這篇文章將為大家詳細講解有關JS如何實現圖片放大鏡插件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

js的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.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如何實現圖片放大鏡插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。