使用 JavaScript 和 CSS 的简单图像放大镜
Posted 海拥✘
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 JavaScript 和 CSS 的简单图像放大镜相关的知识,希望对你有一定的参考价值。
给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站。
图像放大镜在很多网站中都扮演着重要的角色,大多数开发人员使用 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章 基础认证协议
- 第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)备注:图像放大镜
以上是关于使用 JavaScript 和 CSS 的简单图像放大镜的主要内容,如果未能解决你的问题,请参考以下文章
Flash 时钟到 javascript 和 css 时钟相同的图像
是否可以使用 javascript 和/或 css 修改背景 svg 图像?