譯者 | 布加迪
審校 | 重樓
如果您曾經(jīng)瀏覽過購物網(wǎng)站，可能遇到過圖像放大功能。它可以讓您放大圖像的特定區(qū)域，以便瀏覽。結(jié)合這個小小的重要功能可以大大改善您網(wǎng)站的用戶體驗。
以一種無縫銜接的方式構(gòu)建圖像放大鏡可能是個挑戰(zhàn)。但是逐步完成這些步驟將幫助您從頭開始創(chuàng)建自己的圖像放大鏡，無需依賴第三方插件。
何時在Web項目中使用圖像放大鏡？
當(dāng)您構(gòu)建有很多圖像的項目時，圖像放大鏡派得上用場。如前所述，圖像放大鏡在購物網(wǎng)站上很受歡迎，因為有時用戶可能需要在決定是否值得購買之前仔細(xì)觀察產(chǎn)品。
客戶完全依賴網(wǎng)站提供的信息和視覺效果來評估產(chǎn)品的質(zhì)量、功能和外觀。然而，光靠靜態(tài)圖像可能并不總是提供足夠的清晰度或便于全面評估產(chǎn)品。
在傳統(tǒng)商店里，顧客可以親自觸摸產(chǎn)品，近距離仔細(xì)觀察，并評估適用性之后決定購買。圖像放大鏡試圖通過以虛擬方式為用戶提供一種相似的審查和檢查來重現(xiàn)這種體驗。
如果您正在構(gòu)建一個照片庫應(yīng)用程序，圖像放大鏡也派得上用場，因為放大圖像的特定部分是一項重要功能。
構(gòu)建圖像放大鏡
該項目中使用的代碼放在GitHub代碼倉庫中，可供人們免費(fèi)使用，采用MIT許可證。
創(chuàng)建一個文件夾，在該文件夾中添加index.html文件、style.css文件和mAIn.js文件。將這個樣板代碼添加到index.html中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Magnifier</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
在body標(biāo)簽中，創(chuàng)建一個類名為“header”的div元素。然后在“header”div中，添加h1標(biāo)題元素來顯示圖像放大鏡的標(biāo)題。
您可以根據(jù)需要來定制文本。接下來，包括兩個span元素，它們提供了使用放大鏡的說明，并向用戶顯示當(dāng)前縮放級別。
在標(biāo)題部分之后，創(chuàng)建一個類名為“container”的div元素。在這個div中，添加另一個類名為“magnifier”的div元素，并運(yùn)用“hidden”類將其隱藏起來。
這個元素將表示放大鏡圖像。然后，添加一個script標(biāo)簽，“src”屬性被設(shè)置為“/main.js”。
<body>
<div class="header">
<h1>Image Magnifier</h1>
<span>Press <strong>Arrow Up</strong> or <strong>Arrow Down</strong> to
increase or decrease athe zoom level.</span>
<span>Zoom Level: <strong class="zoom-level">1</strong></span>
</div>
<div class="container">
<div class="magnifier hidden"></div>
</div>
<script src="/main.js"></script>
</body>
把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")
);
接下來，為縮放級別、最大縮放級別以及光標(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)在，定義兩個輔助函數(shù)：getZoomLevel（返回當(dāng)前縮放級別）和getPointerPosition（返回帶有光標(biāo)x坐標(biāo)和y坐標(biāo)的對象）。
function getZoomLevel() {
return zoom;
}
function getPointerPosition() {
return { x: pointerX, y: pointerY }
}
接下來，創(chuàng)建一個updateMagImage函數(shù)，該函數(shù)使用當(dāng)前光標(biāo)位置創(chuàng)建一個新的MouseEvent對象，并將其分派給容器元素。這個函數(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”事件的窗口對象添加一個事件偵聽器，當(dāng)用戶按下“ArrowUp”或“ArrowDown”鍵時，可調(diào)整縮放級別。
“keyup”事件上的回調(diào)函數(shù)還負(fù)責(zé)更新縮放級別標(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();
}
});
然后，針對“mousemove”事件為容器元素添加事件偵聽器。
在回調(diào)函數(shù)中，添加從放大鏡元素中移除“hidden”類以使其可見的功能，并計算鼠標(biāo)相對容器的位置，并考慮到頁面滾動。
該函數(shù)還應(yīng)該將放大鏡的變換樣式設(shè)置為計算的位置，并根據(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";
});
然后向容器元素添加另一個事件偵聽器，但這一回事件偵聽器應(yīng)該偵聽“mouseout”事件，并在鼠標(biāo)離開容器區(qū)域時就將“hidden”類添回到放大鏡元素。
container.addEventListener("mouseout", () => {
magnifier.classList.add("hidden");
});
最后，為更新光標(biāo)的x和y位置的“mousmove”事件向窗口對象添加事件偵聽器。
window.addEventListener("mousemove", (e) => {
pointerX = e.clientX;
pointerY = e.clientY;
});
就是這樣！您已成功地使用普通JAVAScript構(gòu)建了一個圖像放大鏡。
圖像放大鏡如何改善用戶體驗？
通過允許用戶放大圖像的特定區(qū)域，放大鏡可以讓他們更清晰地觀察產(chǎn)品細(xì)節(jié)。
這種增強(qiáng)的視覺探索水平給用戶灌輸了信心，因為他們可以做出明智的決定。這有助于提高轉(zhuǎn)化率和提高客戶保留率。
原文標(biāo)題：How to Build an Image Magnifier With Vanilla JavaScript，作者：DAVID UZONDU
