JS實現圖片放大鏡插件實例詳解

本文主要為大家詳細介紹了JS實現圖片放大鏡插件的使用方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

前  言

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

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

#看完效果，大家有想法了嗎，沒有的話，我們一起來看一下是如何實現的~

1實現想法

#① 要達到指上後放大的效果，需要做三個p，一個用來放原圖，另一個用來放放大效果的p，最後一個是滑鼠指上後需要放大部分的p （這個p我們用p標籤來代替）。

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

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

2具體實作步驟

 首先，我們先來建立三個p。

<p id="wrapper"> 
     <!--小图-->
    <p id="img_min"> 
       <!--图片-->
       <img src="img/11.png" alt="min"> 
       <!--跟随鼠标的白块-->
       <p id="mousebg"></p> 
     </p> 
   <!--大图-->
     <p id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </p> 
   </p>

我們HTML程式碼部分已經全部完成，接下來，我們用JS來實作功能：

為原圖新增三個事件，分別是，滑鼠進入，滑鼠移動，滑鼠移出。

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

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;

在做位置分析時，需要考慮四個臨界情況：

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

//特殊情况处理，分别靠近四条边的时候 
 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實作圖片放大鏡的插件就全部完成了。

相關推薦：

5款jquery實現的圖片放大鏡效果特效，商城網站必用！

用css實作圖片放大鏡效果實例詳解（圖）

奇妙的Javascript圖片放大鏡_圖象特效

#

以上是JS實現圖片放大鏡插件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！