译者 | 布加迪
审校 | 重楼
如果您曾经浏览过购物网站，可能遇到过图像放大功能。它可以让您放大图像的特定区域，以便浏览。结合这个小小的重要功能可以大大改善您网站的用户体验。
如果您正在构建一个照片库应用程序，图像放大镜也派得上用场，因为放大图像的特定部分是一项重要功能。
该项目中使用的代码放在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.28at.com/showinfo-26-126-0.html如何使用JavaScript创建一只图像放大镜？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 三言两语说透柯里化和反柯里化
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号