使用 CSS 和 JS 的简单图像放大镜（附完整源码）

写在前面的

大家好，我是海拥，专注于前端知识的分享。今天将给大家带来的是使用 CSS 和 JS 的简单图像放大镜（附完整源码）。图像放大镜在很多网站中都扮演着重要的角色，大多数开发人员使用 jquery 来创建图像放大镜。在本pi'a教程中，我将向大家展示如何使用 HTML、CSS 和 JavaScript 制作一个简单的图像放大镜。

在线演示地址：https://haiyong.site/tools/image-zoom.html

图片说明

源码可在文末免费获取，大家一定要记得点赞收藏呀！！！

✨ 项目基本结构

目录结构如下：

├── css
│   └── style.css
├── js
│   └── script.js
├── img
│   └── img.png
└── index.html

第 1 步：图像放大镜的基本结构

使用以下 HTML 和 CSS 代码，首先我们在网页上为此图像放大镜用 HTML 创建了一个框。你可以在此框中看到图像，这里框的宽度：650px，高度：400px，它被一个 5px 的边框所包围。

HTML：

<div class="container">

</div>

CSS：

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

现在，一个图像已经添加到这个简单的图像放大镜项目中。在这里，大家也可以使用自己喜欢的图片。

HTML：

<div id="zoom">
  <img src="https://img-blog.csdnimg.cn/c43ca410ce4a40e4836664f7dbe98ad5.png" alt="">
</div>

CSS：

#zoom img{
  width: 650px;
  height: 400px;
}

在这里插入图片描述

第 3 步：CSS设计放大镜

现在我们已经创建了放大镜的玻璃，可以在其中通过缩放看到图像。我们将通过 JavaScript 添加这个元素，现在我只是在对其进行设计。

CSS：

#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，你就也可以创建它。

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 类型的放大器。