文章目錄

• • 圖片放大鏡效果
  • 實(shí)現(xiàn)過程
  • • 一、UI界面
    • • 主要樣式設(shè)置
    • 二、加載縮略小圖
    • 三、縮略圖事件監(jiān)聽
    • 四、實(shí)現(xiàn)放大
  • 總結(jié)
  • • 固定尺寸

在一些電商網(wǎng)站上，經(jīng)常看到有商品圖片被放大查看的功能，包括另外一些圖片展示站點(diǎn)，也有類似的功能。
如果我們想讓圖片能展示更多細(xì)節(jié)清晰的內(nèi)容，實(shí)現(xiàn)這樣一個(gè)放大鏡功能，是非常劃算的，既能使用小圖顯示滿足大多數(shù)用戶的查看需求，又能通過放大圖片的方式顯示更清晰內(nèi)容。這樣，一方面可以節(jié)省不必要的大圖流量，又能滿足對(duì)圖片清晰度有要求的用戶需求。
所以，本文將使用前端技術(shù)實(shí)現(xiàn)一個(gè)簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?

圖片放大鏡效果

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

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

接下來，我們具體看看它的實(shí)現(xiàn)過程。

實(shí)現(xiàn)過程

一、UI界面

要實(shí)現(xiàn)放大鏡功能，就要先設(shè)計(jì)好界面布局，從上面的效果圖里看到，界面上分了兩塊：一個(gè)是原始的縮略小圖區(qū)域；一個(gè)是放大后的預(yù)覽大圖區(qū)域。
在html中使用div來布局的話，如下所示：

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

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

主要樣式設(shè)置

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

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

預(yù)覽大圖區(qū)域樣式類 preview，由于要顯示在右側(cè)區(qū)域，也可以使用絕對(duì)定位的方式，超出顯示在小圖區(qū)域的右邊即可：

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

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

二、加載縮略小圖

上面的代碼中，我們只定義了img標(biāo)簽元素，并沒有直接加載圖片資源，這是由于我們做的是以動(dòng)態(tài)加載圖片的方式來實(shí)現(xiàn)這個(gè)放大鏡功能。
當(dāng)動(dòng)態(tài)加載圖片資源后，需要根據(jù)圖片像素寬高，設(shè)置對(duì)應(yīng)界面元素的大小和位置信息。

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

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

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

這時(shí)候的縮略圖，就是我們網(wǎng)站要穩(wěn)定展示的圖片信息，作為用戶初始瀏覽的內(nèi)容，如下圖：

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

從上圖可見，只展示了縮略圖片，放大后的預(yù)覽大圖還沒涉及到，是因?yàn)槲覀兛梢栽诒O(jiān)聽事件里進(jìn)行加載，有利于節(jié)省圖片加載流量。

三、縮略圖事件監(jiān)聽

接下來，我們需要處理縮略小圖的事件監(jiān)聽，實(shí)現(xiàn)加載預(yù)覽大圖、蒙層移動(dòng)的效果。
根據(jù)上面的html布局，我們在縮略小圖的外部容器 el_SmallContainer 上添加鼠標(biāo)事件，主要是 onmouseenter、onmouseleave、onmousemove 三個(gè)事件。

onmouseenter 事件，當(dāng)鼠標(biāo)進(jìn)入到頁面展示的縮略圖上時(shí)進(jìn)行處理，這時(shí)需要做兩件事：一是加載預(yù)覽大圖的原始圖像，二是顯示蒙層和預(yù)覽大圖的完整內(nèi)容區(qū)域。

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

以上代碼，就是鼠標(biāo)進(jìn)入事件的處理，其中有加載并設(shè)置預(yù)覽大圖的原始數(shù)據(jù)信息，具體代碼如下所示：

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'

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

onmouseleave 事件比較簡單，當(dāng)鼠標(biāo)離開縮略圖內(nèi)容區(qū)域的時(shí)候，就隱藏蒙層和預(yù)覽大圖區(qū)域，放大鏡效果隱藏：

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

定義了放大鏡的顯示和隱藏事件后，就應(yīng)該處理移動(dòng)的效果了，移動(dòng)實(shí)現(xiàn)實(shí)時(shí)放大，使用到 onmousemove 鼠標(biāo)事件。

四、實(shí)現(xiàn)放大

鼠標(biāo)移動(dòng)也是在縮略小圖內(nèi)容區(qū)域，對(duì) el_SmallContainer 元素進(jìn)行事件監(jiān)聽：

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

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

• 獲取鼠標(biāo)移動(dòng)的位置信息

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

以上代碼里，讀取了蒙層的offset數(shù)據(jù)，是為了移動(dòng)時(shí)，能夠讓鼠標(biāo)顯示在蒙層的中心位置。

• 限制蒙層移動(dòng)的范圍，不能超出縮略小圖內(nèi)容區(qū)域

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)

• 更新蒙層的位置信息，實(shí)時(shí)移動(dòng)蒙層元素

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

• 設(shè)置預(yù)覽大圖顯示的位置信息

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

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

總結(jié)

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

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

固定尺寸

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。