如果您曾经浏览过购物网站，可能遇到过图像放大功能。它可以让您放大图像的特定区域，以便浏览。结合这个小小的重要功能可以大大改善您网站的用户体验。
以一种无缝衔接的方式构建图像放大镜可能是个挑战。但是逐步完成这些步骤将帮助您从头开始创建自己的图像放大镜，无需依赖第三方插件。
何时在 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 构建了一个图像放大镜。
图像放大镜如何改善用户体验？
通过允许用户放大图像的特定区域，放大镜可以让他们更清晰地观察产品细节。
这种增强的视觉探索水平给用户灌输了信心，因为他们可以做出明智的决定。这有助于提高转化率和提高客户保留率。
我喜爱的开发工具
JNPF 快速开发工具是一组数字技术工具平台，能基于图形化拖拽、参数化配置等更为高效的方式，实现快速构建、数据编排、连接生态、中台服务等。通过少量代码或不用代码实现数字化转型中的场景应用创新。它能缓解甚至解决庞大的市场需求与传统的开发生产力引发的供需关系矛盾问题，是数字化转型过程中降本增效趋势下的产物。
JNPF 采用的是最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue3）。代码生成器依赖性低，灵活的扩展能力，可灵活实现二次开发。
以 JNPF 为代表的企业级低代码平台为了支撑更高技术要求的应用开发，从数据库建模、Web API 构建到页面设计，与传统软件开发几乎没有差异，只是通过低代码可视化模式，减少了构建“增删改查”功能的重复劳动，还没有了解过低代码的伙伴可以尝试了解一下。
应用地址：https://www.jnpfsoft.com/?infoq，如果你未曾体验过，那么可以试试看！
有了它，开发人员在开发过程中就可以轻松上手，充分利用传统开发模式下积累的经验。所以低代码平台对于程序员来说，有着很大帮助。
评论