当前位置： 首页 > news >正文

原生js实现图片预览控件，支持丝滑拖拽，滚轮放缩，放缩聚焦

news 文章来源：https://blog.csdn.net/qq_43319748/article/details/139956139 2025/4/5 12:56:01

手撸源代码如下：注释应该很详细了，拿去直用

可以放到在线编辑器测试，记得修改图片路径

菜鸟教程在线编辑器

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#img_box {position: relative;width: 800px;height: 800px;border: 1px solid #000000;overflow: hidden;cursor: grab;}#img_c {width: 100%;height: 100%;position: absolute;object-fit: contain;user-select: none;-webkit-user-drag: none;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;/* transition: all 0.1s ease-in-out; */}</style>
</head><body><div id="img_box"><img id="img_c" title="没有" src="./1719194464803.jpg"></div><script>initImageScaleElement();function initImageScaleElement() {//定义参数const max = 20;//放缩原图倍数const scale = 0.05;//滚轮一下缩放的变化比例 越大放缩越快//获取对象const box = document.getElementById("img_box");const img = document.getElementById("img_c");/*** 图片已加载完毕后,对图片居中* 图片一开始其实默认是居中的，只不过是img的object-fit: contain属性进行了居中，并且产生了一些边缘填充空白* 这些填充的空白会影响后续图片拖拽的计算，因此需要将img修改成图片展示的真实大小，但对用户视觉不发生改变。*/img.onload = function () {const imgRatio = img.naturalWidth / img.naturalHeight; //图片横纵比const boxRatio = box.clientWidth / box.clientHeight;   //容器横纵比/*** 因为拿到的图片真实大小，不是显示大小，需要手动放缩，适配到容器中* 当图片横纵比大于容器横纵比，图片保持比例的情况下填充容器，此时只能对图片的横向放缩填充全部容器 * 当图片横纵比小于容器横纵比，图片保持比例的情况下填充容器，此时只能对图片的纵向放缩填充全部容器 * 这个规律可以自己画图试验一下*/if (imgRatio > boxRatio) { const scale = box.clientWidth / img.naturalWidth;img.style.width = box.clientWidth; //长度填充img.style.height = img.naturalHeight * scale; //高度自适应img.style.top = Math.ceil((box.clientHeight - img.clientHeight) / 2) + "px" ;//位置居中} else {const scale = box.clientHeight / img.naturalHeight;img.style.height = box.clientHeight;//高度填充img.style.width = img.naturalWidth * scale;//长度自适应img.style.left = Math.ceil((box.clientWidth - img.clientWidth) / 2) + "px";//位置居中}};//用于元素拖拽时边界的参数限制，入参：{ 实际值，左区间，右区间 }const getRange = (actual, limita, limitb) => {if (actual < -limita) {return -limita;} else if (actual > limitb) {return limitb;}return actual;}/*** 缩放操作* */box.onwheel = (event) => {event.preventDefault(); //关闭默认事件const center_x = event.clientX;const center_y = event.clientY;const wheelDelta = event.deltaY;const top_d = center_y - img.offsetTop;const left_d = center_x - img.offsetLeft;if (wheelDelta > 0) {//缩小 往后推滚轮  【滚轮值和缩放关系不是固定的，你也可以反过来】let modifyHeight = img.clientHeight * (1 - scale);let modifyWidth = img.clientWidth * (1 - scale);if (modifyHeight * max > img.naturalHeight) { //只在比例范围内，放缩img.style.height = modifyHeight;img.style.width = modifyWidth;img.style.top = center_y - top_d * (1 - scale);img.style.left = center_x - left_d * (1 - scale);} else {console.log("缩小超出" + max * 100 + "%比例无法缩小");}} else {//放大  往前推滚轮let modifyHeight = img.clientHeight * (1 + scale);let modifyWidth = img.clientWidth * (1 + scale);if (modifyHeight < img.naturalHeight * max) { //只在比例范围内，放缩img.style.height = modifyHeight;img.style.width = modifyWidth;img.style.top = center_y - top_d * (1 + scale);img.style.left = center_x - left_d * (1 + scale);} else {console.log("放大超出" + max * 100 + "%比例无法放大");}}}/*** 拖拽操作*///拖拽需要的全局变量const drag = {status: false,lastX: null,lastY: null}box.onmousedown = (event) => {if (event.button === 0) {//鼠标会移出元素，甚至移出到浏览器外部，使用document监听移动就可以不受影响。document.onmousemove = (event) => {if (drag.status) {let mx = event.clientX - drag.lastXlet my = event.clientY - drag.lastYdrag.lastX = event.clientXdrag.lastY = event.clientYlet top = img.offsetTop + mylet left = img.offsetLeft + mx//拖拽超出容器外部无意义，可能找不回，因此图片位置不能任意拖拽至少有一个角或一个边在容器内部，这里减10就是预留出的宽度img.style.left = getRange(left, img.clientWidth - 10, box.clientWidth - 10) + 'px';img.style.top = getRange(top, img.clientHeight - 10, box.clientHeight - 10) + "px";//如果你不想让图片跑出容器，那就调整这里就好了，控制两个相邻边就能控制整个图片，如// img.style.left = getRange(left,0, box.clientWidth - img.clientWidth) + 'px';// img.style.top = getRange(top,0, box.clientHeight - img.clientHeight) + "px";}}//鼠标松开，初始化操作，如果鼠标在元素外部松开，元素的松开监听是获取不到的，因此需要用document监听document.onmouseup = (event) => {if (event.button === 0) {drag.status = falsedocument.onmousemove = nulldocument.onmouseup = null}}drag.status = truedrag.lastX = event.clientXdrag.lastY = event.clientY}}}</script></body></html>

相关文章：

原生js实现图片预览控件，支持丝滑拖拽，滚轮放缩，放缩聚焦

手撸源代码如下&#xff1a;注释应该很详细了&#xff0c;拿去直用 可以放到在线编辑器测试&#xff0c;记得修改图片路径 菜鸟教程在线编辑器 <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" conten…...

编程日记 2024/6/25 15:03:02

C语言入门课程学习笔记9：指针

C语言入门课程学习笔记9 第41课 - 指针&#xff1a;一种特殊的变量实验-指针的使用小结 第42课 - 深入理解指针与地址实验-指针的类型实验实验小结 第43课 - 指针与数组&#xff08;上&#xff09;实验小结 第44课 - 指针与数组&#xff08;下&#xff09;实验实验小结 第45课 …...

编程日记 2024/6/25 15:02:00

借助 Cloudflare D1 和 Drizzle 在 Astro 上实现全栈

使用 Cloudflare D1 和 Drizzle ORM 将后端添加到 Astro 项目的分步指南 文章目录 安装 Astro添加 Cloudflare 适配器部署到 Pages安装 wrangler 并登录创建 D1 数据库创建 wrangler.toml 文件将 .wrangler 添加到 .gitignore更新 astro.config.ts安装 Drizzle 依赖项创建 driz…...

编程日记 2024/6/25 15:00:58

SUSE linux 15的网络管理

1 手工配置网络 wicked提供了一种新的网络配置框架。自SUSE 12起&#xff0c;SUSE使用了新的网络管理工具wicked&#xff0c;这个是区别与其他常见发行版的。常见的发行版目前大多使用的是NetworkManager服务进行网络管理。 1.1 wicked网络配置 传统网络接口管理面临的挑战之…...

编程日记 2024/6/25 14:59:55

海康威视-下载的录像视频浏览器播放问题

目录 1、播放异常比对 2、视频编码检查 2.1、正常视频解析 2.2、海康视频解析 2.3、比对工具 3、转码 3.1、maven依赖 3.2、实现代码 4、验证 在前面的文章&#xff08;海康威视-按时间下载录像文件_海康威视 sdk 下载录像 大小0-CSDN博客&#xff09;中&#xff0c;通…...

编程日记 2024/6/25 14:55:50

养殖自动化管理系统：开启智慧养殖新篇章

在现代农业的快速演进中&#xff0c;养殖业正经历一场前所未有的技术革命。养殖自动化管理系统&#xff0c;作为这场变革的前沿科技&#xff0c;正逐步成为推动行业高效、环保、可持续发展的关键力量。本文将深入探讨自动化养殖系统如何通过精准管理、智能监控、数据驱动决策&a…...

编程日记 2024/6/25 14:54:48

SmartEDA革新来袭：融合Multisim与Proteus精髓，引领电子设计新纪元！

在电子设计领域&#xff0c;每一次技术的革新都如同春风化雨&#xff0c;滋润着设计师们的心田。今天&#xff0c;我们迎来了一个划时代的电子设计自动化&#xff08;EDA&#xff09;工具——SmartEDA&#xff0c;它不仅融合了业界知名的Multisim和Proteus的精华&#xff0c;更…...

编程日记 2024/6/25 14:52:46

【FFmpeg】AVFormatContext结构体

【FFmpeg】AVFormatContext结构体 1.AVFormatContext结构体1.2 const struct AVInputFormat *iformat1.3 const struct AVOutputFormat *oformat 参考&#xff1a; FFMPEG结构体分析&#xff1a;AVFormatContext 示例工程&#xff1a; 【FFmpeg】调用ffmpeg库实现264软编 【FF…...

编程日记 2024/6/25 14:51:45

【SpringSecurity】认证与鉴权框架SpringSecurity——授权

目录 权限系统的必要性常见的权限管理框架SpringSecurity授权基本流程准备脚本限制访问资源所需权限菜单实体类和Mapper封装权限信息封装认证/鉴权失败处理认证失败封装鉴权失败封装配置SpringSecurity 过滤器跨域处理接口添加鉴权hasAuthority/hasAnyAuthorityhasRole/​ hasA…...

编程日记 2024/6/25 14:50:43

深入解析FTP：原理、架构与搭建方式

在当今互联网世界中&#xff0c;文件传输是日常工作和生活中不可或缺的一部分。FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;作为一种老而弥坚的协议&#xff0c;一直在文件传输领域发挥着重要作用。本文将从技术人的角度&#xff0c;详细分析F…...

编程日记 2024/6/25 14:47:40

Springboot与RestTemplate

RestTemplate是Spring提供的用于访问Rest服务的客户端&#xff0c;RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率。 一、使用Get进行访问 1、获取json格式 使用 getForEntity() API 发起 GET 请求&#xff1a; RestTemplate restTemplate…...

编程日记 2024/6/25 14:46:38

端口发布与暴露

端口发布与暴露 目录 发布端口发布到临时端口发布所有端口试一试 使用 Docker CLI使用 Docker Compose 如果你一直在跟随本指南&#xff0c;你应该理解容器为应用程序的每个组件提供了隔离的进程。每个组件 - 如 React 前端、Python API 和 Postgres 数据库 - 都运行在自己的…...

编程日记 2024/6/25 14:42:34

Unity：使用Texture2D动态创建的图像无法正常显示 / 修改图像后未生效

开发中遇到需要动态绘制图像的需求&#xff0c;前后文代码如下所示&#xff1a; Texture2D newImageTexture new Texture2D(width, height); Color32[] newImagePixels new Color32[height * width];for (int y 0; y < height ; y) {for (int x 0; x < width; x){if…...

编程日记 2024/6/25 14:41:32

【LinuxC语言】详解TCP/IP

文章目录 前言TCP与UDP协议的介绍TCP协议流式传输TCP的三次握手连接TCP的四次挥手连接断开总结前言 在我们的日常生活中，无论是浏览网页，还是发送电子邮件，甚至是在线视频聊天，都离不开网络通信。而在网络通信中，TCP和UDP协议起着至关重要的作用。本文将以通俗易懂的语言…...

编程日记 2024/6/25 14:37:28

数字化转型下的企业人力资源信息系统研究

随着数字化转型的加速&#xff0c;企业人力资源管理面临着全新的挑战和机遇。传统的人力资源信息系统&#xff08;HRIS&#xff09;在新时代的要求下必须进行深刻的革新和升级&#xff0c;以更好地支持企业的发展战略和员工的需求。 数据驱动的决策支持 在当今这个信息化迅猛发…...

编程日记 2024/6/25 14:35:26

docker camunda 8.5 部署步骤

Camunda Platform 8 环境准备 Docker 版本要求 Docker 20.10.16 is required; docker compose version 1.27.0.;github 开源地址:https://github.com/camunda/camunda-platformcamunda7 文档地址:https://docs.camunda.org/manual/7.21/user-guide/process-engine/社区地址: …...

编程日记 2024/6/25 14:33:23

学懂C#编程：常用高级技术——委托（Delegate）应用场景——委托与Lambda表达式的结合使用详解

在C#中&#xff0c;委托与Lambda表达式的结合使用是现代编程实践中的一个重要且强大的特性&#xff0c;它极大地提高了代码的简洁性和可读性。下面将详细讲解这两个概念如何协同工作&#xff0c;以及如何在实际编程中有效利用它们。 委托基础 委托是C#中的一种引用类型&#x…...

编程日记 2024/6/25 14:32:21

05-java基础——循环习题

循环的选择&#xff1a;知道循环的次数或者知道循环的范围就使用for循环&#xff0c;其次再使用while循环 猜数字 程序自动生成一个1-100之间的随机数&#xff0c;在代码中使用键盘录入去猜出这个数字是多少&#xff1f; 要求&#xff1a;使用循环猜&#xff0c;一直猜中为止…...

编程日记 2024/6/25 14:30:19

网络安全等级保护测评

网络安全等级保护 《GB17859 计算机信息系统安全保护等级划分准则》 规定计算机信息系统安全保护等级共分五级 《中华人民共和国网络安全法》 “国家实行网络安全等级保护制度。 等级测评 测评机构依据国家网络安全等级保护制度规定&#xff0c;按照有关 管理规范和…...

编程日记 2024/6/25 14:28:17

真有被这套零售数据分析方案惊艳到

在数字化时代&#xff0c;零售行业的竞争愈发激烈&#xff0c;如何精准把握市场动态、优化业务流程、提升市场竞争力成为了每一家零售企业都面临的挑战。奥威BI零售数据分析方案&#xff0c;一款具备全面、高效、智能的数据分析能力的BI方案出现地恰到好处。 奥威BI零售数据分…...

编程日记 2024/6/25 14:27:15

亚马逊卖家为何需要自养账号？揭秘背后的原因

亚马逊是一家极为重视用户体验的国际电商平台&#xff0c;因此用户的评论和星级评价对店铺排名影响深远。平台审核评论非常严格&#xff0c;这些评价直接影响商品在平台上的生存和发展。 在亚马逊上&#xff0c;用户的评分和评论对商品的成功至关重要。好评多的商品通常被认为优…...

编程日记 2024/6/25 14:25:12

牛了，LSTM+Transformer王炸结合创新，荣登Nature，精度高达95.65%

【LSTM结合Transformer】的研究方向探索了如何利用Transformer模型处理序列数据的能力以及LSTM在捕捉时间序列依赖性方面的优势。这一方向的意义在于通过融合两种模型的特点&#xff0c;提高了对复杂时空数据的预测准确性&#xff0c;尤其是在智能电网攻击检测、多变量时间序列…...

编程日记 2024/6/25 14:24:09

Java面试题：通过实例说明工厂模式和抽象工厂模式的用法，以及它们在解耦中的作用

工厂模式和抽象工厂模式是创建型设计模式中的两种&#xff0c;主要用于对象的创建&#xff0c;并且通过将对象的创建过程封装起来&#xff0c;来实现代码的解耦和灵活性。下面通过具体实例来说明这两种模式的用法及其在解耦中的作用。 工厂模式&#xff08;Factory Method Pat…...

编程日记 2024/6/25 14:23:08

成都欣丰洪泰文化传媒有限公司电商服务的创新者

在数字化浪潮席卷全球的今天&#xff0c;电商行业正以前所未有的速度蓬勃发展。作为这一领域的佼佼者&#xff0c;成都欣丰洪泰文化传媒有限公司凭借其对电商服务的深度理解和精准把握&#xff0c;成功在竞争激烈的市场中脱颖而出&#xff0c;成为行业内的佼佼者。 一、公司简…...

编程日记 2024/6/25 14:21:06

学习笔记——动态路由——RIP（距离矢量协议）

一、距离矢量协议 1、距离矢量协议 矢量行为&#xff1a;协议收到一个路由之后&#xff0c;查看是否可以加入到本地的路由表中&#xff0c;如果可以加入&#xff0c;则可以传递&#xff0c;如果不可以加入&#xff0c;则无法传递。 距离矢量路由协议 RIP基于距离矢量算法(又…...

编程日记 2024/6/25 14:20:04

【python】OpenCV—Segmentation

文章目录 cv2.kmeans牛刀小试 cv2.kmeans cv2.kmeans 是 OpenCV 库中用于执行 K-Means 聚类算法的函数。以下是根据参考文章整理的 cv2.kmeans 函数的中文文档&#xff1a; 一、函数功能 cv2.kmeans 用于执行 K-Means 聚类算法&#xff0c;将一组数据点划分到 K 个簇中&…...

编程日记 2024/6/25 14:19:03

python-题库篇-Python语言特性

文章目录 Python语言特性1 Python的函数参数传递2 Python中的元类(metaclass)3 staticmethod和classmethod4 类变量和实例变量5 Python自省6 字典推导式7 Python中单下划线和双下划线8 字符串格式化:%和.format9 迭代器和生成器10 *args and **kwargs11 面向切面编程AOP和装饰器…...

编程日记 2024/6/25 14:17:00

WEB界面上使用ChatGPT

&#xff08;作者&#xff1a;陈玓玏&#xff09; 开源项目&#xff0c;欢迎star哦&#xff0c;https://github.com/tencentmusic/cube-studio 随着大模型不断发展&#xff0c;现在无论写代码&#xff0c;做设计&#xff0c;甚至老师备课、评卷都可以通过AI大模型来实现了&…...

编程日记 2024/6/25 14:14:58

【Matlab】CNN-LSTM分类 卷积神经网络-长短期记忆神经网络组合模型（附代码）

资源下载&#xff1a; https://download.csdn.net/download/vvoennvv/89466499 分类算法资源合集&#xff1a;https://download.csdn.net/download/vvoennvv/89466519 目录 Matlab SVM支持向量机分类算法 Matlab RF随机森林分类算法 Matlab RBF径向基神经网络分类算法 Ma…...

编程日记 2024/6/25 14:13:56

性能工具之 MySQL OLTP Sysbench BenchMark 测试示例

文章目录 一、前言二、测试环境1、服务器配置2、测试拓扑 三、测试工具安装四、测试步骤1、导入数据2、压测数据3、清理数据 五、结果解析六、最后 一、前言 做为一名性能工程师掌握对 MySQL 的性能测试是非常必要的&#xff0c;本文基于 Sysbench 对MySQL OLTP&#xff08;联…...

编程日记 2024/6/25 14:12:53