譯者 | 布加迪

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。

審校 | 重樓

如果您曾經(jīng)瀏覽過購物網(wǎng)站，可能遇到過圖像放大功能。它可以讓您放大圖像的特定區(qū)域，以便瀏覽。結(jié)合這個(gè)小小的重要功能可以大大改善您網(wǎng)站的用戶體驗(yàn)。

以一種無縫銜接的方式構(gòu)建圖像放大鏡可能是個(gè)挑戰(zhàn)。但是逐步完成這些步驟將幫助您從頭開始創(chuàng)建自己的圖像放大鏡，無需依賴第三方插件。

何時(shí)在Web項(xiàng)目中使用圖像放大鏡？

當(dāng)您構(gòu)建有很多圖像的項(xiàng)目時(shí)，圖像放大鏡派得上用場(chǎng)。如前所述，圖像放大鏡在購物網(wǎng)站上很受歡迎，因?yàn)橛袝r(shí)用戶可能需要在決定是否值得購買之前仔細(xì)觀察產(chǎn)品。

客戶完全依賴網(wǎng)站提供的信息和視覺效果來評(píng)估產(chǎn)品的質(zhì)量、功能和外觀。然而，光靠靜態(tài)圖像可能并不總是提供足夠的清晰度或便于全面評(píng)估產(chǎn)品。

在傳統(tǒng)商店里，顧客可以親自觸摸產(chǎn)品，近距離仔細(xì)觀察，并評(píng)估適用性之后決定購買。圖像放大鏡試圖通過以虛擬方式為用戶提供一種相似的審查和檢查來重現(xiàn)這種體驗(yàn)。

如果您正在構(gòu)建一個(gè)照片庫應(yīng)用程序，圖像放大鏡也派得上用場(chǎng)，因?yàn)榉糯髨D像的特定部分是一項(xiàng)重要功能。

構(gòu)建圖像放大鏡

該項(xiàng)目中使用的代碼放在GitHub代碼倉庫中，可供人們免費(fèi)使用，采用MIT許可證。

創(chuàng)建一個(gè)文件夾，在該文件夾中添加index.html文件、style.css文件和main.js文件。將這個(gè)樣板代碼添加到index.html中：

在body標(biāo)簽中，創(chuàng)建一個(gè)類名為“header”的div元素。然后在“header”div中，添加h1標(biāo)題元素來顯示圖像放大鏡的標(biāo)題。

您可以根據(jù)需要來定制文本。接下來，包括兩個(gè)span元素，它們提供了使用放大鏡的說明，并向用戶顯示當(dāng)前縮放級(jí)別。

在標(biāo)題部分之后，創(chuàng)建一個(gè)類名為“container”的div元素。在這個(gè)div中，添加另一個(gè)類名為“magnifier”的div元素，并運(yùn)用“hidden”類將其隱藏起來。

這個(gè)元素將表示放大鏡圖像。然后，添加一個(gè)script標(biāo)簽，“src”屬性被設(shè)置為“/main.js”。

 

 
Image Magnifier

 Press Arrow Up or Arrow Down to
 increase or decrease athe zoom level.

 Zoom Level: 1
 

 

 

 

 

把style.css文件中的代碼換成以下代碼。需要的話，您還可以使用Less之類的CSS預(yù)處理器。

:root {
 --magnifier-width: 150;
 --magnifier-height: 150;
}

body {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.container {
 width: 400px;
 height: 300px;
 background-size: cover;
 background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
 background-repeat: no-repeat;
 position: relative;
 cursor: none;
}

.magnifier {
 border-radius: 400px;
 box-shadow: 0px 11px 8px 0px #0000008a;
 position: absolute;
 width: calc(var(--magnifier-width) * 1px);
 height: calc(var(--magnifier-height) * 1px);
 cursor: none;
 background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
 background-repeat: no-repeat;
}

span {
 display: block;
}

.header {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.hidden {
 visibility: hidden;
}

div > span:nth-child(3) {
 font-size: 20px;

在main.js文件中，使用document.querySelector方法，檢索帶有類名“放大鏡”和“容器”的HTML元素，并將它們分別賦予給變量magnifier和變量container。

然后，使用getComputedStyle函數(shù)來檢索放大鏡元素的寬度和高度，然后使用substring和indexOf方法從返回的字符串中提取數(shù)值。

將提取的寬度賦予變量magnifierWidth，將提取的高度賦予變量magnifierHeight。

let magnifier = document.querySelector(".magnifier");
let container = document.querySelector(".container");

let magnifierWidth = getComputedStyle(magnifier).width.substring(
  0,
   getComputedStyle(magnifier).width.indexOf("p")
);

let magnifierHeight = getComputedStyle(magnifier).width.substring(
   0,
  getComputedStyle(magnifier).height.indexOf("p")
);

接下來，為縮放級(jí)別、最大縮放級(jí)別以及光標(biāo)和放大鏡圖像的位置設(shè)置變量。

let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;

在上面的代碼塊中，pointerX和pointerY都表示光標(biāo)在X軸和Y軸上的位置。

現(xiàn)在，定義兩個(gè)輔助函數(shù)：getZoomLevel（返回當(dāng)前縮放級(jí)別）和getPointerPosition（返回帶有光標(biāo)x坐標(biāo)和y坐標(biāo)的對(duì)象）。

function getZoomLevel() {
 return zoom;
}

function getPointerPosition() {
 return { x: pointerX, y: pointerY }
}

接下來，創(chuàng)建一個(gè)updateMagImage函數(shù)，該函數(shù)使用當(dāng)前光標(biāo)位置創(chuàng)建一個(gè)新的MouseEvent對(duì)象，并將其分派給容器元素。這個(gè)函數(shù)負(fù)責(zé)更新放大鏡圖像。

function updateMagImage() {
 let evt = new MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bubbles: true,
 cancelable: true,
 view: window,
 });

 container.dispatchEvent(evt);
}

現(xiàn)在，您應(yīng)該為“keyup”事件的窗口對(duì)象添加一個(gè)事件偵聽器，當(dāng)用戶按下“ArrowUp”或“ArrowDown”鍵時(shí)，可調(diào)整縮放級(jí)別。

“keyup”事件上的回調(diào)函數(shù)還負(fù)責(zé)更新縮放級(jí)別標(biāo)簽，并觸發(fā)updateMagImage函數(shù)。

window.addEventListener("keyup", (e) => {
 if (e.key === "ArrowUp" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }

 if (e.key === "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

然后，針對(duì)“mousemove”事件為容器元素添加事件偵聽器。

在回調(diào)函數(shù)中，添加從放大鏡元素中移除“hidden”類以使其可見的功能，并計(jì)算鼠標(biāo)相對(duì)容器的位置，并考慮到頁面滾動(dòng)。

該函數(shù)還應(yīng)該將放大鏡的變換樣式設(shè)置為計(jì)算的位置，并根據(jù)縮放級(jí)別和鼠標(biāo)位置確定放大鏡圖像的背景大小和位置。

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("hidden");
 let rect = container.getBoundingClientRect();
 let x = e.pageX - rect.left;
 let y = e.pageY - rect.top;

 x = x - window.scrollX;
 y = y - window.scrollY;

 magnifier.style.transform = `translate(${x}px, ${y}px)`;
 const imgWidth = 400;
 const imgHeight = 300;

 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px";

 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;

 magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";
});

然后向容器元素添加另一個(gè)事件偵聽器，但這一回事件偵聽器應(yīng)該偵聽“mouseout”事件，并在鼠標(biāo)離開容器區(qū)域時(shí)就將“hidden”類添回到放大鏡元素。

container.addEventListener("mouseout", () => {
 magnifier.classList.add("hidden");
});

最后，為更新光標(biāo)的x和y位置的“mousmove”事件向窗口對(duì)象添加事件偵聽器。

window.addEventListener("mousemove", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

就是這樣！您已成功地使用普通JavaScript構(gòu)建了一個(gè)圖像放大鏡。

圖像放大鏡如何改善用戶體驗(yàn)？

通過允許用戶放大圖像的特定區(qū)域，放大鏡可以讓他們更清晰地觀察產(chǎn)品細(xì)節(jié)。

這種增強(qiáng)的視覺探索水平給用戶灌輸了信心，因?yàn)樗麄兛梢宰龀雒髦堑臎Q定。這有助于提高轉(zhuǎn)化率和提高客戶保留率。

原文標(biāo)題：How to Build an Image Magnifier With Vanilla JavaScript，作者：DAVID UZONDU

分享名稱：如何使用JavaScript創(chuàng)建一只圖像放大鏡？
文章起源：http://www.dlmjj.cn/article/dppdoso.html