譯者 | 布加迪
審校 | 重樓
如果您曾經瀏覽過購物網站，可能遇到過圖像放大功能。它可以讓您放大圖像的特定區域，以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗。
以一種無縫銜接的方式構建圖像放大鏡可能是個挑戰。但是逐步完成這些步驟將幫助您從頭開始創建自己的圖像放大鏡，無需依賴第三方插件。
何時在Web項目中使用圖像放大鏡？
當您構建有很多圖像的項目時，圖像放大鏡派得上用場。如前所述，圖像放大鏡在購物網站上很受歡迎，因為有時用戶可能需要在決定是否值得購買之前仔細觀察產品。
客戶完全依賴網站提供的信息和視覺效果來評估產品的質量、功能和外觀。然而，光靠靜態圖像可能并不總是提供足夠的清晰度或便于全面評估產品。
在傳統商店里，顧客可以親自觸摸產品，近距離仔細觀察，并評估適用性之后決定購買。圖像放大鏡試圖通過以虛擬方式為用戶提供一種相似的審查和檢查來重現這種體驗。
如果您正在構建一個照片庫應用程序，圖像放大鏡也派得上用場，因為放大圖像的特定部分是一項重要功能。
構建圖像放大鏡
該項目中使用的代碼放在GitHub代碼倉庫中，可供人們免費使用，采用MIT許可證。
創建一個文件夾，在該文件夾中添加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標簽中，創建一個類名為“header”的div元素。然后在“header”div中，添加h1標題元素來顯示圖像放大鏡的標題。
您可以根據需要來定制文本。接下來，包括兩個span元素，它們提供了使用放大鏡的說明，并向用戶顯示當前縮放級別。
在標題部分之后，創建一個類名為“container”的div元素。在這個div中，添加另一個類名為“magnifier”的div元素，并運用“hidden”類將其隱藏起來。
這個元素將表示放大鏡圖像。然后，添加一個script標簽，“src”屬性被設置為“/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預處理器。
: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函數來檢索放大鏡元素的寬度和高度，然后使用substring和indexOf方法從返回的字符串中提取數值。
將提取的寬度賦予變量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")
);
接下來，為縮放級別、最大縮放級別以及光標和放大鏡圖像的位置設置變量。
let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;
在上面的代碼塊中，pointerX和pointerY都表示光標在X軸和Y軸上的位置。
現在，定義兩個輔助函數：getZoomLevel（返回當前縮放級別）和getPointerPosition（返回帶有光標x坐標和y坐標的對象）。
function getZoomLevel() {
return zoom;
}
function getPointerPosition() {
return { x: pointerX, y: pointerY }
}
接下來，創建一個updateMagImage函數，該函數使用當前光標位置創建一個新的MouseEvent對象，并將其分派給容器元素。這個函數負責更新放大鏡圖像。
function updateMagImage() {
let evt = new MouseEvent("mousemove", {
clientX: getPointerPosition().x,
clientY: getPointerPosition().y,
bubbles: true,
cancelable: true,
view: window,
});
container.dispatchEvent(evt);
}
現在，您應該為“keyup”事件的窗口對象添加一個事件偵聽器，當用戶按下“ArrowUp”或“ArrowDown”鍵時，可調整縮放級別。
“keyup”事件上的回調函數還負責更新縮放級別標簽，并觸發updateMagImage函數。
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”事件為容器元素添加事件偵聽器。
在回調函數中，添加從放大鏡元素中移除“hidden”類以使其可見的功能，并計算鼠標相對容器的位置，并考慮到頁面滾動。
該函數還應該將放大鏡的變換樣式設置為計算的位置，并根據縮放級別和鼠標位置確定放大鏡圖像的背景大小和位置。
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";
});
然后向容器元素添加另一個事件偵聽器，但這一回事件偵聽器應該偵聽“mouseout”事件，并在鼠標離開容器區域時就將“hidden”類添回到放大鏡元素。
container.addEventListener("mouseout", () => {
magnifier.classList.add("hidden");
});
最后，為更新光標的x和y位置的“mousmove”事件向窗口對象添加事件偵聽器。
window.addEventListener("mousemove", (e) => {
pointerX = e.clientX;
pointerY = e.clientY;
});
就是這樣！您已成功地使用普通JAVAScript構建了一個圖像放大鏡。
圖像放大鏡如何改善用戶體驗？
通過允許用戶放大圖像的特定區域，放大鏡可以讓他們更清晰地觀察產品細節。
這種增強的視覺探索水平給用戶灌輸了信心，因為他們可以做出明智的決定。這有助于提高轉化率和提高客戶保留率。
原文標題：How to Build an Image Magnifier With Vanilla JavaScript，作者：DAVID UZONDU
