图像放大镜在很多网站中都扮演着重要的角色，大多数开发人员使用 jquery 来创建图像放大镜。在本教程中，我将向大家展示如何使用 HTML、CSS 和 JavaScript 制作一个简单的图像放大镜。
使用 JavaScript 和 CSS 的简单图像放大镜
在线演示地址：https://haiyong.site/tools/image-zoom.html
源码可在文末免费获取
✨ 项目基本结构
目录结构如下：
├── css│ └── style.css├── js│ └── script.js├── img│ └── img.png└── index.html
复制代码
第 1 步：图像放大镜的基本结构
使用以下 HTML 和 CSS 代码，首先在网页上为此图像放大镜 HTML 创建了一个框。您可以在此框中看到图像。这里框的宽度：650px，高度：400 像素已经用过。它被一个 5px 的边框包围。
<div class="container"> </div>
复制代码
body,html { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; min-width: 700px; background: rgb(202, 201, 201);}.container { width: 650px; height: 400px; background: #fff; display: flex; align-items: center; justify-content: center; border: 5px solid rgb(244, 254, 255);}
复制代码
第 2 步：将图像添加到放大镜
现在，一个图像已添加到这个简单的图像放大镜项目中。在这里，您可以使用您选择的图像。
<div id="zoom"> <img src="https://img-blog.csdnimg.cn/c43ca410ce4a40e4836664f7dbe98ad5.png" alt=""></div>
复制代码
#zoom img{ width: 650px; height: 400px;}
复制代码
第 3 步：CSS 设计放大镜
现在已经创建了放大镜玻璃，可以在其中通过缩放看到图像。我将通过 JavaScript 添加这个元素。现在我只是在设计。
#lens { position: absolute; border: 2px solid grey; border-radius: 50%; overflow: hidden; cursor: none; box-shadow: inset 0 0 10px 2px grey; filter: drop-shadow(0 0 2px grey);}
#lens > * { cursor: none;}
复制代码
第 4 步：使用 JavaScript 激活图像放大镜
这个 CSS 图像放大镜需要一些 JavaScript 才能工作。没有使用 jQuery 或外部库。因此，如果您了解基本的 JavaScript，您就可以构建它。
//lensSize => 宽度和高度const lensSize = 200;
function magnify(id, zoom){ const el = document.getElementById(id);//cloneNode() 方法创建一个节点的副本，并返回克隆 const copy = el.cloneNode(true);//createElement() 方法创建由 tagName 指定的 HTML 元素 const lens = document.createElement("div"); //setAttribute() 设置指定元素的属性值 lens.setAttribute("id","lens") lens.style.width = lensSize + "px"; lens.style.height = lensSize + "px"; //appendChild() 方法用于插入一个新节点 el.appendChild(lens);//getBoundingClientRect() 方法返回元素的大小及其位置 el.getBoundingClientRect(); copy.style.zoom = zoom; lens.appendChild(copy); copy.style.width = (el.offsetWidth * zoom) + "px"; copy.style.heigth = (el.offsetHeight * zoom) + "px"; copy.style.position = "absolute"; //当指针在元素上移动时执行 MouseMove el.addEventListener("mousemove", (ev) => {//preventDefault() 方法停止选定元素的默认操作 ev.preventDefault(); ev.stopPropagation(); const pos = getCursorPos(ev); lens.style.left = - (lensSize/2) + pos.x + "px"; lens.style.top = - (lensSize/2) + pos.y + "px"; copy.style.left = - (pos.x - el.offsetLeft) + (lensSize/zoom)*0.5 + "px"; copy.style.top = - (pos.y - el.offsetTop) + (lensSize/zoom)*0.5 + "px"; })}
function getCursorPos(e) { var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); return {x : x , y : y}; }//放大值magnify("zoom", 4)
复制代码
JavaScript 图像放大镜在很多网站中都扮演着非常重要的角色。如果你需要放大项目中的任何图像，则可以使用这种 javascript 类型的图像放大镜 。
📑 完整源码下载⬇
一共两种下载方式，推荐后一种（免费）
1.CSDN 资源下载：https://download.csdn.net/download/qq_44273429/86270184
2.GitHub 地址（给个 star ❤️ 吧）：https://github.com/wanghao221/moyu
评论