使用 JavaScript 和 CSS 的简单图像放大镜

• 💂 个人网站:【 海拥】【摸鱼小游戏】
• 🤟 风趣幽默的前端学习课程：👉28个案例趣学前端
• 💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• 💬 免费且实用的计算机相关知识题库：👉进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。

图像放大镜在很多网站中都扮演着重要的角色，大多数开发人员使用 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 的边框包围。

<divclass="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 步：将图像添加到放大镜

现在，一个图像已添加到这个简单的图像放大镜项目中。在这里，您可以使用您选择的图像。

<divid="zoom"><imgsrc="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;functionmagnify(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";})}functiongetCursorPos(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章 基础认证协议
• 第2章 实验环境
• 第3章 域信息搜集
• 第4章 组策略攻击
• 第5章 PTH攻击
• 第6章 Kerberosating攻击
• 第7章 ACL
• 第8章 黄金白银票据
• 第9章 NTLM重放攻击
• 第10章 Kerberos协议典型漏洞
• 第11章 基于域信任的攻击
• 第12章 基于域委派的攻击
• 第13章 基于资源的受限委派攻击
• 第14章 DCShadow
• 第15章 域内隐蔽后门
• 第16章 基于元数据的检测

📑 完整源码下载⬇

一共三种下载方式，推荐后两种（免费）

1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/86270184
2.GitHub 地址（给个star ❤️ 吧）：https://github.com/wanghao221/moyu
3.通过下方卡片添加作者VX(wh18363)备注：图像放大镜