2023 年的 Node.js 生態系統
隨著技術的不斷演進和創新，Node.js 在 2023 年達到了一個新的高度。Node.js 擁有一個龐大的生態系統，可以幫助開發人員更快地實現復雜的應用。本文就來看看 Node.js 最新的生
譯者 | 布加迪
審校 | 重樓
如果您曾經瀏覽過購物網站，可能遇到過圖像放大功能。它可以讓您放大圖像的特定區域，以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗。
如果您正在構建一個照片庫應用程序，圖像放大鏡也派得上用場，因為放大圖像的特定部分是一項重要功能。
該項目中使用的代碼放在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> <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> <class="container"> <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;}> 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
本文鏈接：http://www.rrqrq.com/showinfo-26-126-0.html如何使用JavaScript創建一只圖像放大鏡？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 三言兩語說透柯里化和反柯里化
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號