实现图片拖拽和缩小放大功能。

1. 前言

        不知道各位前端小伙伴蓝湖使用的多不多，反正我是经常在用，ui将原型图设计好后上传至蓝湖，前端开发人员就可以开始静态页面的的编写了。对于页面细节看的不是很清楚可以使用滚轮缩放后再拖拽查看，还是很方便的。于是就花了点时间研究了一下。今天分享给大家。

2. 实现

HTML

 <div class="imgBox"><img style="width: 150px; height: 150px; padding: 10px" src="../../../images/HTTP工作原理.jpg" class="img-responsive" /><img style="width: 150px; height: 150px; padding: 10px" src="../../../images/HTTP报文结构.jpg" class="img-responsive" /></div><div id="outerdiv" style="position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.7);z-index: 2;width: 100%;height: 100%;display: none;"><img id="bigimg" src="" /></div>

js

拖拽查看图片逻辑

function imgDrag() {// 绑定 鼠标按下事件image.addEventListener("pointerdown", pointerdown);// 绑定 鼠标移动事件image.addEventListener("pointermove", pointermove);image.addEventListener("pointerup", function (e) {if (isPointerdown) {isPointerdown = false;}});image.addEventListener("pointercancel", function (e) {if (isPointerdown) {isPointerdown = false;}});}function pointerdown(e) {isPointerdown = true;console.log(e.pointerId)// 说明：Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放。可以理解为：在窗口不是全屏情况下，我在拖动放大图片时即使鼠标移出可窗口之外，此时事件还是捕获在该放大图片上。image.setPointerCapture(e.pointerId);lastPointermove = {x: e.clientX,y: e.clientY,};}function pointermove(e) {if (isPointerdown) {const current1 = {x: e.clientX,y: e.clientY,};diff.x = current1.x - lastPointermove.x;diff.y = current1.y - lastPointermove.y;lastPointermove = {x: current1.x,y: current1.y,};x += diff.x;y += diff.y;image.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;}e.preventDefault();}

滚轮缩放逻辑

function handleStopWheel(e) {let itemSizeChange = 1.1; //每一次滚动放大的倍数if (e.target.id == "bigimg") {// 说明：e.dataY如果大于0则表示鼠标向下滚动，反之则向上滚动，这里设计为向上滚动为缩小，向下滚动为放大if (e.deltaY < 0) {itemSizeChange = 1 / 1.1;}let _initScale = initScale * itemSizeChange;// 说明：在超过或低于临界值时，虽然让initScale等于maxZoom或minreduce，但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce，而是跳过。if (_initScale > maxZoom) {initScale = maxZoom;} else if (_initScale < minreduce) {initScale = minreduce;} else {initScale = _initScale;}const origin = {x: (itemSizeChange - 1) * imgWidth * 0.5,y: (itemSizeChange - 1) * imgHeight * 0.5,};// 计算偏移量if (_initScale < maxZoom && _initScale > minreduce) {x -= (itemSizeChange - 1) * (e.clientX - x) - origin.x;y -= (itemSizeChange - 1) * (e.clientY - y) - origin.y;e.target.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;}}// 阻止默认事件e.preventDefault();}

js全部代码

<script>/*** 实现图片点击放大、拖拽、滚轴滚动焦点缩放功能，相关参数、函数声明*/let imgWidth, imgHeight; // 图片点击放大初始尺寸参数let maxZoom = 4; //最大缩放倍数let minreduce = 0.5; // 最小缩放倍数let initScale = 1; //滚动缩放初始倍数，并不是图片点击放大的倍数let isPointerdown = false; //鼠标按下的标识//记录鼠标按下坐标和按下移动时坐标let lastPointermove = {x: 0,y: 0,};//移动过程从上一个坐标到下一个坐标之间的差值let diff = {x: 0,y: 0,};//图片放大后左上角的坐标，主要结合diff参数用于鼠标焦点缩放时图片偏移坐标let x = 0;let y = 0;// 记录节点const allImg = document.querySelectorAll(".imgBox img");const outerdiv = document.querySelector("#outerdiv");const image = outerdiv.querySelector("#bigimg");window.onload = function () {allImg.forEach((item) => {item.addEventListener("click", (e) => {const that = e.target;image.style.transform = "scale(1)";//图片放大展示函数调用imgShow(that);// 监听鼠标滚动事件window.addEventListener("wheel", handleStopWheel, {passive: false,});// 拖转事件调用imgDrag();});});};function imgShow(that) {let src = that.getAttribute("src");image.setAttribute("src", src);// 设置尺寸和调整比例let windowW = document.documentElement.clientWidth;let windowH = document.documentElement.clientHeight;let realWidth = image.naturalWidth; //获取图片的原始宽度let realHeight = image.naturalHeight; //获取图片的原始高度let outsideScale = 0.8;let belowScale = 1.4;let realRatio = realWidth / realHeight;let windowRatio = windowW / windowH;// 说明：下面是我自己的一些判断逻辑，大致意思就是图片的真实尺寸大于屏幕尺寸则使用屏幕尺寸，如果小于屏幕尺寸就使用自己本身的尺寸；并根据大于或者小于的比例对图片的尺寸进一步调整。coder可以根据自己的要求进行修改。if (realRatio >= windowRatio) {if (realWidth > windowW) {imgWidth = windowH * outsideScale;imgHeight = (imgWidth / realWidth) * realHeight;} else {if (realWidth * belowScale < windowW) {imgWidth = realWidth * (belowScale - 0.2);imgHeight = (imgWidth / realWidth) * realHeight;} else {imgWidth = realWidth;imgHeight = realHeight;}}} else {if (realHeight > windowH) {imgHeight = windowH * outsideScale;imgWidth = (imgHeight / realHeight) * realWidth;} else {if (realHeight * belowScale < windowW) {imgHeight = realHeight * (belowScale - 0.2);imgWidth = (imgHeight / realHeight) * realWidth;} else {imgWidth = realWidth;imgHeight = realHeight;}}}//设置放大图片的尺寸、偏移量并展示image.style.width = imgWidth + "px";image.style.height = imgHeight + "px";x = (windowW - imgWidth) * 0.5;y = (windowH - imgHeight) * 0.5;image.style.transform = `translate3d(${x}px, ${y}px, 0)`;outerdiv.style.display = "block";// 点击蒙版及外面区域放大图片关闭outerdiv.onclick = () => {outerdiv.style.display = "none";initScale = 1;window.removeEventListener("wheel", handleStopWheel);};// 阻止事件冒泡image.onclick = (e) => {e.stopPropagation();};}function handleStopWheel(e) {let itemSizeChange = 1.1; //每一次滚动放大的倍数if (e.target.id == "bigimg") {// 说明：e.dataY如果大于0则表示鼠标向下滚动，反之则向上滚动，这里设计为向上滚动为缩小，向下滚动为放大if (e.deltaY < 0) {itemSizeChange = 1 / 1.1;}let _initScale = initScale * itemSizeChange;// 说明：在超过或低于临界值时，虽然让initScale等于maxZoom或minreduce，但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce，而是跳过。if (_initScale > maxZoom) {initScale = maxZoom;} else if (_initScale < minreduce) {initScale = minreduce;} else {initScale = _initScale;}const origin = {x: (itemSizeChange - 1) * imgWidth * 0.5,y: (itemSizeChange - 1) * imgHeight * 0.5,};// 计算偏移量if (_initScale < maxZoom && _initScale > minreduce) {x -= (itemSizeChange - 1) * (e.clientX - x) - origin.x;y -= (itemSizeChange - 1) * (e.clientY - y) - origin.y;e.target.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;}}// 阻止默认事件e.preventDefault();}function imgDrag() {// 绑定 鼠标按下事件image.addEventListener("pointerdown", pointerdown);// 绑定 鼠标移动事件image.addEventListener("pointermove", pointermove);image.addEventListener("pointerup", function (e) {if (isPointerdown) {isPointerdown = false;}});image.addEventListener("pointercancel", function (e) {if (isPointerdown) {isPointerdown = false;}});}function pointerdown(e) {isPointerdown = true;console.log(e.pointerId)// 说明：Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放。可以理解为：在窗口不是全屏情况下，我在拖动放大图片时即使鼠标移出可窗口之外，此时事件还是捕获在该放大图片上。image.setPointerCapture(e.pointerId);lastPointermove = {x: e.clientX,y: e.clientY,};}function pointermove(e) {if (isPointerdown) {const current1 = {x: e.clientX,y: e.clientY,};diff.x = current1.x - lastPointermove.x;diff.y = current1.y - lastPointermove.y;lastPointermove = {x: current1.x,y: current1.y,};x += diff.x;y += diff.y;image.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;}e.preventDefault();}</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/48347.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

RK3568 linux-5.10 rk809 声卡实现spk hp自动切换

RK3568 linux-5.10 rk809 声卡实现spk hp自动切换

文章目录 前言一、修改dts1、kernel/arch/arm64/boot/dts/rockchip/rk3568-evb.dtsi2、kernel/arch/arm64/boot/dts/rockchip/rk3568-evb1-ddr4-v10.dtsi二、修改驱动1、kernel/sound/soc/codecs/rk817_codec.c2、kernel/sound/soc/rockchip/rockchip_multicodecs.c总结前言 l…
阅读更多...
Springcloud之gateway的使用详解

Springcloud之gateway的使用详解

官网地址&#xff1a;https://docs.spring.io/spring-cloud-gateway/docs/4.0.4/reference/html/ 1.网关入门 helloword 网关不依赖start-web 导入的pom&#xff1a; <!--gateway--> <dependency><groupIdorg.springframework.cloud</groupId><arti…
阅读更多...
openEuler 知：版本比较

openEuler 知：版本比较

文章目录 前言工具oe_diffoepkg 前言 本文的“版本比较”主要是指比较 openEuler 操作系统两个版本之间的 rpm 包的版本差异&#xff0c;只比较版本差异&#xff0c;不比较文件内容的差异。 比较版本主要用于分析两个操作系统版本之间软件包的版本变化。 工具 oe_diff 工具…
阅读更多...
Python面试整理-列表和元组的操作

Python面试整理-列表和元组的操作

在Python中，列表（list）和元组（tuple）是用于存储序列数据的两种主要数据类型。它们之间的主要区别在于，列表是可变的，而元组是不可变的。这意味着你可以修改列表中的元素，但不能修改元组中的元素。以下是一些常用的列表和元组的操作： 列表操作 创建列表 fruits = [&quo…
阅读更多...
在 Ubuntu Server 22.04 上安装 Docker 的详细步骤

在 Ubuntu Server 22.04 上安装 Docker 的详细步骤

在 Ubuntu Server 22.04 上安装 Docker 的详细步骤 本文档详细记录了在 Ubuntu Server 22.04 上安装 Docker 的完整过程&#xff0c;包括解决过程中遇到的问题。希望能对读者有所帮助。 安装过程&#xff0c;重点需要看官方文档。https://docs.docker.com/engine/install/ubu…
阅读更多...
C语言——字符串的输出、获取和复制总结

C语言——字符串的输出、获取和复制总结

1.输出字符串 &#xff08;1&#xff09;puts char *p "aha c"; char str[128] {"hello world"};puts(p); puts(str); puts函数会自动在输出后进行换行。 &#xff08;2&#xff09;printf char *p "aha c"; char str[128] {"hell…
阅读更多...
目标检测经典模型之YOLOV5-detect.py源码解析（持续更新）

目标检测经典模型之YOLOV5-detect.py源码解析（持续更新）

detect文件框架 一、导入模块包二、定义run函数1. 归一化操作代码解析uint8精度转换归一化 2. 扩展维度为什么扩展维度&#xff1f;代码解释 3. 对检测结果类别计数检查是否有检测结果统计每个类别的出现次数构建描述性字符串 三、定义命令行参数四、主函数 本帖是YOLOV5推理部…
阅读更多...
70. 爬楼梯【 力扣(LeetCode) 】

70. 爬楼梯【 力扣(LeetCode) 】

一、题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 二、测试用例 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶…
阅读更多...
CUDA编程00 - 配置CUDA开发环境

CUDA编程00 - 配置CUDA开发环境

第一步&#xff1a; 在一台装有Nvidia显卡和驱动的机器上&#xff0c;用nvidia-smi命令查看显卡所支持cuda版本 第二步&#xff1a; 到Nvidia官网下载CUDA Toolkit并安装&#xff0c;CUDA Toolkit Archive | NVIDIA Developer 安装时按提示下一步即可&#xff0c;安装完成用 …
阅读更多...
【端智能】端智能技术演进与实践

【端智能】端智能技术演进与实践

什么是端智能技术 端智能&#xff08;On-Device Machine Learning&#xff09;是指把机器/深度学习算法模型应用和部署到端设备上&#xff0c;这里“端设备”是相对于云服务而言的&#xff0c;可以是手机&#xff0c;也可以是物联网IoT设备。 Google对端智能的介绍&#xff1…
阅读更多...
系统架构设计师教程（清华第二版） 第3章 信息系统基础知识-3.2 业务处理系统-解读

系统架构设计师教程（清华第二版） 第3章 信息系统基础知识-3.2 业务处理系统-解读

教材中，一会儿“业务处理系统”，一会儿“事务处理系统”，语法毛病一堆。真是清华的水平！！！ 系统架构设计师教程 第3章 信息系统基础知识-3.2 业务处理系统 3.2.1　业务处理系统的概念3.2.2　业务处理系统的功能3.2.2.1 数据输入3.2.2.2 数据处理3.2.2.2.1 批处理 (Batch …
阅读更多...
计算机体系结构||指令的调度和延迟分布（3）

计算机体系结构||指令的调度和延迟分布（3）

实验3 指令的调度和延迟分布 3.1实验目的 &#xff08;1&#xff09;加深对指令调度技术的理解。 &#xff08;2&#xff09;加深对延迟分支技术的理解。 &#xff08;3&#xff09;熟练掌握用指令调度技术来解决流水线中的数据冲突的方法。 &#xff08;4&#xff09;进一…
阅读更多...
使用AI给编程赋能

使用AI给编程赋能

传送门&#xff1a;https://www.bilibili.com/video/BV1pf421B71v?p23&vd_source092ecb16e8482a7243d0f8f7718c31a2 1. AIGC AI&#xff08;Artificial Intelligence&#xff09;&#xff1a;人工智能&#xff0c;是计算机科学体系下的一个学科&#xff0c;是指通过计算机…
阅读更多...
c# 开发AutoCAD扩展

c# 开发AutoCAD扩展

在C#中开发AutoCAD扩展涉及使用AutoCAD的.NET API&#xff0c; 利用AutoCAD的功能并创建自定义命令、对话框、块、图层和其他图形元素。以下是一些关键步骤和概念&#xff0c;可以帮助你开始使用C#开发AutoCAD扩展&#xff1a; 准备开发环境 安装AutoCAD&#xff1a;确保你有一…
阅读更多...
在 macOS 上使用 Jadx 进行 APK 反编译

在 macOS 上使用 Jadx 进行 APK 反编译

在 macOS 上使用 Jadx 进行 APK 反编译 Jadx 是一个流行的开源工具&#xff0c;用于将 Android APK 文件反编译成 Java 源代码。本文将详细介绍如何在 macOS 上安装和使用 Jadx&#xff0c;包括之前讨论的内容和步骤。 1. 安装 Jadx 在 macOS 上&#xff0c;可以通过 Homebr…
阅读更多...
lua 游戏架构 之 SceneLoad场景加载（一）

lua 游戏架构 之 SceneLoad场景加载（一）

设计一个为BaseSceneLoad class&#xff0c;用于处理场景加载的相关操作 &#xff0c;主要作用是提供了一个通用的场景加载框架&#xff0c;使得子类可以按照统一的接口进行场景加载操作。子类需要实现这些方法&#xff0c;以便在加载场景时能够正确地处理场景加载的各个阶段。…
阅读更多...
【Linux】线程互斥和同步

【Linux】线程互斥和同步

目录 线程互斥 相关概念 互斥量mutex 互斥量的接口 初始化互斥量 销毁互斥量 互斥量加锁/解锁 可重入VS线程安全 概念 可重入与线程安全的联系 可重入与线程安全的区别 死锁 死锁的四个必要条件 避免死锁 避免死锁的算法 线程同步 条件变量 条件变量函数 初始…
阅读更多...
语义分割——为什么单通道8bit灰度图像能显示多种色块？？？

语义分割——为什么单通道8bit灰度图像能显示多种色块？？？

目录 一、问题二、解答2.1 标签图的实际存储格式2.2 标签图的显示颜色2.3 颜色映射示例 三、应用颜色映射3.1 OpenCV显示标签图3.2 Matplotlib显示标签图 四、总结 一、问题 大家在做语义分割时不知道有没有这样的疑惑&#xff0c;使用打标签工具后&#xff0c;标签图是单通道…
阅读更多...
项目收获总结--大数据量存储架构设计方案

项目收获总结--大数据量存储架构设计方案

项目收获总结--大数据量存储架构设计方案 一、背景二、数据存储层技术选型2.1 MySQL2.2 MongoDB2.3 HBase2.4 HBaseElasticSearch 三、HBaseElasticSearch基本原理3.1 前置考虑3.2 HBaseElasticSearch优点3.3 HBaseElasticSearch缺点 四、HBaseElasticSearch数据一致性架构4.1 …
阅读更多...
大语言模型-Transformer-Attention Is All You Need

大语言模型-Transformer-Attention Is All You Need

一、背景信息&#xff1a; Transformer是一种由谷歌在2017年提出的深度学习模型。 主要用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;特别是序列到序列&#xff08;Sequence-to-Sequence&#xff09;的学习问题&#xff0c;如机器翻译、文本生成等。Transfor…
阅读更多...
最新文章

Copyright @ 2022~2023