直屏旗艦來了 iQOO 12和K70 Pro同臺(tái)競(jìng)技
旗艦機(jī)基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
譯者 | 布加迪
審校 | 重樓
如果您曾經(jīng)瀏覽過購物網(wǎng)站，可能遇到過圖像放大功能。它可以讓您放大圖像的特定區(qū)域，以便瀏覽。結(jié)合這個(gè)小小的重要功能可以大大改善您網(wǎng)站的用戶體驗(yàn)。
如果您正在構(gòu)建一個(gè)照片庫應(yīng)用程序，圖像放大鏡也派得上用場(chǎng)，因?yàn)榉糯髨D像的特定部分是一項(xiàng)重要功能。
該項(xiàng)目中使用的代碼放在GitHub代碼倉庫中，可供人們免費(fèi)使用，采用MIT許可證。
創(chuàng)建一個(gè)文件夾，在該文件夾中添加index.html文件、style.css文件和main.js文件。將這個(gè)樣板代碼添加到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)建一個(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”。
<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預(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;}> 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è)圖像放大鏡。
通過允許用戶放大圖像的特定區(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
本文鏈接：http://m.www897cc.com/showinfo-26-126-0.html如何使用JavaScript創(chuàng)建一只圖像放大鏡？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 三言兩語說透柯里化和反柯里化
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)