文章目錄

• • 圖片放大鏡效果
  • 實現過程
  • • 一、UI界面
    • • 主要樣式設置
    • 二、加載縮略小圖
    • 三、縮略圖事件監聽
    • 四、實現放大
  • 總結
  • • 固定尺寸

在一些電商網站上，經常看到有商品圖片被放大查看的功能，包括另外一些圖片展示站點，也有類似的功能。
如果我們想讓圖片能展示更多細節清晰的內容，實現這樣一個放大鏡功能，是非常劃算的，既能使用小圖顯示滿足大多數用戶的查看需求，又能通過放大圖片的方式顯示更清晰內容。這樣，一方面可以節省不必要的大圖流量，又能滿足對圖片清晰度有要求的用戶需求。
所以，本文將使用前端技術實現一個簡單的圖片放大鏡功能，希望能給大家帶來一定的幫助。

圖片放大鏡效果

我們可以先來看下圖片放大鏡最后的效果圖：

如上圖所示，
左邊的小圖方塊內，就是需要放大的圖片，上面有一個蒙層區域(可視作放大鏡)，只可以在小圖范圍內移動，該蒙層遮住的區域就代表圖片需要放大的部分；
右邊的大圖方塊內，展示的是蒙層部分放大后的清晰圖像，這里本質上是顯示的完整像素的圖片、或者是比左邊更大像素的高清圖片。
左邊蒙層的實時移動，在右邊顯示清晰圖像，這就形成了一個圖片放大鏡的功能效果。

接下來，我們具體看看它的實現過程。

實現過程

一、UI界面

要實現放大鏡功能，就要先設計好界面布局，從上面的效果圖里看到，界面上分了兩塊：一個是原始的縮略小圖區域；一個是放大后的預覽大圖區域。
在html中使用div來布局的話，如下所示：

<div id="el_EnlargeContainer" class="enlarge"><!--左邊原始小圖區域--><div id="el_SmallContainer" class="small"><img id="el_SmallImage"/><div id="el_maskEnarge" class="mask"></div></div><!--右邊預覽大圖區域--><div id="el_PreviewContainer" class="preview"><img id="el_PreviewImage"/></div> </div>

從以上html代碼可知，
外層定義了一個 el_EnlargeContainer 的整個放大功能整體內容區域，里面有兩個子元素：一個是縮略小圖的div，包含一個img圖片元素用于展示縮略圖，還有一個蒙層的div元素；另外一個是預覽大圖區域，包含有放大后的大圖img元素，這里加載的是原始大尺寸圖。

主要樣式設置

蒙層需要覆蓋在縮略小圖的上面，所以需要使用絕對定位方式，并且設置帶透明度的顏色，鼠標樣式也設置為 move，默認隱藏，具體的CSS樣式如下所示：

.mask {position: absolute;top: 0;left: 0;background: rgba(255, 255, 0, 0.6);cursor: move;display: none; }

預覽大圖區域樣式類 preview，由于要顯示在右側區域，也可以使用絕對定位的方式，超出顯示在小圖區域的右邊即可：

.preview {position: absolute;top: 0;left: 150px;/* ... */ }

其他的樣式設置都較簡單，根據布局方式一一展示即可，這里就先略過。
下面，我們需要做的是加載圖片。

二、加載縮略小圖

上面的代碼中，我們只定義了img標簽元素，并沒有直接加載圖片資源，這是由于我們做的是以動態加載圖片的方式來實現這個放大鏡功能。
當動態加載圖片資源后，需要根據圖片像素寬高，設置對應界面元素的大小和位置信息。

縮略小圖作為首先需要主體展示的資源，我們需要先加載，并設置小圖區域容器和圖片的大小：

el_SmallImage.onload = () => {let { width, height } = el_SmallImageconst smallScale = Math.min(SMALLSIZE / width, SMALLSIZE / height, 1)smallImgWidth = width * smallScalesmallImgHeight = height * smallScaleel_EnlargeContainer.style.width = el_SmallImage.style.width = smallImgWidth + 'px'el_EnlargeContainer.style.height = el_SmallImage.style.height = smallImgHeight + 'px'resolve(el_SmallImage) } el_SmallImage.src = imgSrc

以上代碼，加載縮略小圖后，獲取到圖片的寬高數據，然后相應的計算。其中 SMALLSIZE 是預先定義的一個常量，表示小圖區域的一個固定尺寸大小，可根據需要自定義取值，通過該值計算縮略圖的縮放比例——縮略圖依據該固定尺寸，計算合適的寬高比例進行展示。
注意，這里設置的是整個放大鏡的整體內容區域 el_EnlargeContainer 的大小，就是小圖展示的大小，而預覽放大的圖片是浮在右側的，并不被包含在這塊區域內。

這時候的縮略圖，就是我們網站要穩定展示的圖片信息，作為用戶初始瀏覽的內容，如下圖：

一般電商網站上，使用輪播圖切換的方式，展示縮略圖片信息。

從上圖可見，只展示了縮略圖片，放大后的預覽大圖還沒涉及到，是因為我們可以在監聽事件里進行加載，有利于節省圖片加載流量。

三、縮略圖事件監聽

接下來，我們需要處理縮略小圖的事件監聽，實現加載預覽大圖、蒙層移動的效果。
根據上面的html布局，我們在縮略小圖的外部容器 el_SmallContainer 上添加鼠標事件，主要是 onmouseenter、onmouseleave、onmousemove 三個事件。

onmouseenter 事件，當鼠標進入到頁面展示的縮略圖上時進行處理，這時需要做兩件事：一是加載預覽大圖的原始圖像，二是顯示蒙層和預覽大圖的完整內容區域。

el_SmallContainer.onmouseenter = async () => {// 加載預覽大圖原始圖if (loadPreviewImage === null) {loadPreviewImage = await setPreviewImage(previewImgUrl)}// 顯示蒙層和預覽大圖區域el_maskEnarge.style.display = 'block'el_PreviewContainer.style.display = 'block' }

以上代碼，就是鼠標進入事件的處理，其中有加載并設置預覽大圖的原始數據信息，具體代碼如下所示：

let { width, height } = el_PreviewImage let previewScale = Math.min(PREVIEWSIZE / width, PREVIEWSIZE / height, 1)el_PreviewContainer.style.width = width * previewScale + 'px' el_PreviewContainer.style.height = height * previewScale + 'px' el_PreviewContainer.style.left = (smallImgWidth + 10) + 'px'el_maskEnarge.style.width = smallImgWidth * previewScale + 'px' el_maskEnarge.style.height = smallImgHeight * previewScale + 'px'

以上代碼，用于加載預覽大圖，這時能獲取到圖片的原始寬高數據，其中 PREVIEWSIZE 也是預先定義的常量，表示預覽大圖區域的一個固定尺寸大小。大圖寬高與PREVIEWSIZE尺寸計算出對應的縮放比，用于計算實際展示區域的尺寸。
而 el_PreviewContainer 預覽大圖容器內容需要定位在右側區域，設置 left 樣式屬性。
另外，蒙層的大小也得設置，蒙層大小是在縮略小圖區域展示的，但要使用預覽大圖的縮放比，這樣才能得到準確的蒙層內容用于在右側放大區域呈現放大效果。

onmouseleave 事件比較簡單，當鼠標離開縮略圖內容區域的時候，就隱藏蒙層和預覽大圖區域，放大鏡效果隱藏：

el_SmallContainer.onmouseleave = () => {el_maskEnarge.style.display = 'none'el_PreviewContainer.style.display = 'none' }

定義了放大鏡的顯示和隱藏事件后，就應該處理移動的效果了，移動實現實時放大，使用到 onmousemove 鼠標事件。

四、實現放大

鼠標移動也是在縮略小圖內容區域，對 el_SmallContainer 元素進行事件監聽：

el_SmallContainer.onmousemove = (event) => {// ... }

在該事件中，我們需要處理以下幾件事：

• 獲取鼠標移動的位置信息

let x = event.pageX - el_EnlargeContainer.offsetLeft - el_maskEnarge.offsetWidth / 2 let y = event.pageY - el_EnlargeContainer.offsetTop - el_maskEnarge.offsetHeight / 2

以上代碼里，讀取了蒙層的offset數據，是為了移動時，能夠讓鼠標顯示在蒙層的中心位置。

• 限制蒙層移動的范圍，不能超出縮略小圖內容區域

const xMax = el_SmallContainer.offsetWidth - el_maskEnarge.offsetWidth x = x < 0 ? 0 : (x > xMax ? xMax : x) const yMax = el_SmallContainer.offsetHeight - el_maskEnarge.offsetHeight y = y < 0 ? 0 : (y > yMax ? yMax : y)

• 更新蒙層的位置信息，實時移動蒙層元素

el_maskEnarge.style.left = x + 'px' el_maskEnarge.style.top = y + 'px'

• 設置預覽大圖顯示的位置信息

const rate = el_PreviewImage.offsetWidth / el_SmallContainer.offsetWidth el_PreviewImage.style.marginTop = -(rate * y) + 'px' el_PreviewImage.style.marginLeft = -(rate * x) + 'px'

以上代碼，是在一定的內容區域里，加載一張完整原始尺寸的大圖，但多余的部分先隱藏 overflow: hidden;。然后計算縮略小圖和預覽大圖的比值，右側的預覽大圖等比例移動，通過使用 marginTop 和 marginLeft 屬性設置定位的方式來移動。注意，這里處理的 el_PreviewImage 原始大圖元素。
數據取負值，是相對于初始加載時候左上角的值。

總結

至此，一個可以非固定尺寸、動態加載圖片的放大鏡功能就基本完成了。
動態加載圖片，可以不用考慮圖片的像素寬高，任意尺寸的圖片都可以完整放大，縮略小圖和預覽大圖也可以是同一張圖片。
另外，就是放大鏡的內容顯示區域，是根據不同圖片的比例進行動態計算的，尺寸大小可變，但能夠通過常量設定，控制在一定范圍內。

圖片放大鏡功能的大部分代碼都已在文章中列出來了，根據這些內容，還可以適當修改，更改成各種符合我們需求的插件。

固定尺寸

很多網站在處理放大鏡功能上，使用的是固定尺寸縮略小圖和預覽大圖的方式。
我們當然也可以處理固定尺寸，這個時候就需要特定尺寸的縮略小圖和原始大圖，直接設置元素的固定尺寸，縮略圖也可以直接加載：

/* 放大鏡區域的大小 */ .enlarge {/* ... */width: 150px;height: 150px; } /* 縮略小圖的大小 */ .small img {width: 150px;height: 150px; } /* 蒙層大小 */ .mask {/* ... */width: 75px;height: 75px; } /* 預覽大圖區域的大小 */ .preview {/* ... */width: 300px;height: 300px; } <img id="el_SmallImage" src="chrome.png"/>

以上代碼，通過css直接設置各區域的寬高大小，縮略圖也是直接加載，如此處理，就不需要手動設定各元素的寬高。
同樣可以在鼠標進入事件中加載原始大圖，這個時候圖片尺寸也是固定的。
其他事件處理，基本相同，這樣就可以增加一個固定圖像尺寸和固定界面尺寸的放大鏡功能了。

總結

以上是生活随笔為你收集整理的Web前端实现一个图片放大镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。