纯JS图片查看器

article/2025/9/23 6:03:55

目前支持：放大、缩小（含滚轮）、旋转、还原

/*** @说明信息* @date 2022/10/13 19:46:44* @初始化图片查看器* @date 2022/09/21 14:40:06* @id 唯一标识，指定id区域内的图片* @params 扩展参数，设置图片大小，目前只支持：案例:{ width: '100%', height: '100%' }* @ignoreImg 需要忽略的图片，需加在图片标签上，案例：<img src="" ignoreImg>************************************/export function photoInfo (id, params) {// 获取根节点const bodyDom = document.body// 获取指定ID范围内的图片列表const imgList = document.getElementById(id).getElementsByTagName('img')// 给图片设置点击事件if (imgList.length > 0) {let i = 0for (i; i < imgList.length; i++) {if (imgList[i].getAttribute('ignoreImg') === null) {imgList[i].onclick = function (ev) {// 禁止浏览器滚动bodyDom.style.overflow = 'hidden'// 添加底层遮罩const maskDom = document.createElement('div')maskDom.style.position = 'fixed'maskDom.style.top = '0'maskDom.style.width = '100%'maskDom.style.height = '100%'maskDom.style.zIndex = '99999990'maskDom.style.backgroundColor = 'rgba(64,70,76, .8)'bodyDom.appendChild(maskDom)// 顶部关闭区域const maskCloseDom = document.createElement('div')maskCloseDom.style.float = 'right'maskCloseDom.style.marginTop = '10px'maskCloseDom.style.marginRight = '10px'maskCloseDom.style.marginBottom = '20px'maskCloseDom.style.width = '110px'maskCloseDom.style.height = '40px'maskCloseDom.style.lineHeight = '40px'maskCloseDom.style.textAlign = 'center'maskCloseDom.style.zIndex = '99999991'maskCloseDom.innerText = '×'maskCloseDom.style.fontSize = '26px'maskCloseDom.style.color = '#fff'maskCloseDom.style.cursor = 'pointer'maskCloseDom.style.backgroundColor = 'rgba(50,55,59, .9)'maskDom.appendChild(maskCloseDom)maskCloseDom.onclick = function () {onCloseDom(maskDom, bodyDom)}// 中间图片区域const maskImgDivDom = document.createElement('div')maskImgDivDom.style.position = 'relative'maskImgDivDom.style.width = '80%'maskImgDivDom.style.height = '85%'maskImgDivDom.style.overflow = 'hidden'maskImgDivDom.style.margin = '70px auto auto auto'maskImgDivDom.style.zIndex = '99999991'maskDom.appendChild(maskImgDivDom)// 主区域图片console.log(params)const maskImgDom = document.createElement('img')maskImgDom.style.position = 'absolute'maskImgDom.style.top = '0'maskImgDom.style.left = '0'maskImgDom.style.right = '0'maskImgDom.style.margin = 'auto'if (params !== undefined && params.height !== undefined) {maskImgDom.style.height = params.height}if (params !== undefined && params.width !== undefined) {maskImgDom.style.width = params.width}maskImgDom.style.maxWidth = '100%'maskImgDom.style.maxHeight = '100%'maskImgDom.setAttribute('src', ev.srcElement.currentSrc)maskImgDom.setAttribute('draggable', true)maskImgDivDom.appendChild(maskImgDom)// 拖拽事件maskImgDivDom.onmousedown = function (e) {onPositionImg(e, maskImgDivDom, maskImgDom)}// 鼠标上下滚动事件let scrollFunc = function (e) {let evt = e || window.eventif (evt.wheelDelta) { // 兼容处理if (evt.wheelDelta > 0) { //当滑轮向上滚动时onLargeImg (maskImgDom)}if (evt.wheelDelta < 0) { //当滑轮向下滚动时onSmallImg(maskImgDom)}} else if (evt.detail) {  //Firefox滑轮事件if (evt.detail > 0) { //当滑轮向上滚动时onLargeImg (maskImgDom)}if (evt.detail < 0) { //当滑轮向下滚动时onSmallImg(maskImgDom)}}}if (maskImgDivDom.addEventListener) {maskImgDivDom.addEventListener('DOMMouseScroll', scrollFunc, { passive: false });}maskImgDivDom.onmousewheel = scrollFunc// 底部操作区域const maskOperationDom = document.createElement('div')maskOperationDom.style.display = 'flex'maskOperationDom.style.justifyContent = 'space-between'maskOperationDom.style.width = '500px'maskOperationDom.style.height = '40px'maskOperationDom.style.lineHeight = '40px'maskOperationDom.style.margin = '10px auto auto auto'maskOperationDom.style.textAlign = 'center'maskOperationDom.style.zIndex = '99999991'maskDom.appendChild(maskOperationDom)// 放大const maskButtonLargeDom = document.createElement('div')maskButtonLargeDom.style.boxSizing = 'border-box'maskButtonLargeDom.style.padding = '0 40px'maskButtonLargeDom.style.cursor = 'pointer'maskButtonLargeDom.style.textAlign = 'center'maskButtonLargeDom.innerText = '放大'maskButtonLargeDom.style.color = '#fff'maskButtonLargeDom.style.backgroundColor = 'rgba(50,55,59, .9)'maskOperationDom.appendChild(maskButtonLargeDom)maskButtonLargeDom.onclick = function () {onLargeImg (maskImgDom)}// 缩小const maskButtonSmallDom = document.createElement('div')maskButtonSmallDom.style.boxSizing = 'border-box'maskButtonSmallDom.style.padding = '0 40px'maskButtonSmallDom.style.cursor = 'pointer'maskButtonSmallDom.style.textAlign = 'center'maskButtonSmallDom.innerText = '缩小'maskButtonSmallDom.style.color = '#fff'maskButtonSmallDom.style.backgroundColor = 'rgba(50,55,59, .9)'maskOperationDom.appendChild(maskButtonSmallDom)maskButtonSmallDom.onclick = function () {onSmallImg(maskImgDom)}// 还原const maskButtonReductionDom = document.createElement('div')maskButtonReductionDom.style.boxSizing = 'border-box'maskButtonReductionDom.style.padding = '0 40px'maskButtonReductionDom.style.cursor = 'pointer'maskButtonReductionDom.style.textAlign = 'center'maskButtonReductionDom.innerText = '还原'maskButtonReductionDom.style.color = '#fff'maskButtonReductionDom.style.backgroundColor = 'rgba(50,55,59, .9)'maskOperationDom.appendChild(maskButtonReductionDom)maskButtonReductionDom.onclick = function () {onReductionImg(maskImgDom)}// 旋转const maskButtonRotateDom = document.createElement('div')maskButtonRotateDom.style.boxSizing = 'border-box'maskButtonRotateDom.style.padding = '0 40px'maskButtonRotateDom.style.cursor = 'pointer'maskButtonRotateDom.style.textAlign = 'center'maskButtonRotateDom.innerText = '旋转'maskButtonRotateDom.style.color = '#fff'maskButtonRotateDom.style.backgroundColor = 'rgba(50,55,59, .9)'maskOperationDom.appendChild(maskButtonRotateDom)maskButtonRotateDom.onclick = function () {onRotateImg(maskImgDom)}}}}}
}let scaleIndex = 1 // 放大的值
let rotateIndex = 0 // 旋转的值
let offsetX, offsetY // 拖动的值
let canMove = false // 是否可拖拽// 放大
function onLargeImg (item) {scaleIndex += 0.2item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'
}// 缩小
function onSmallImg (item) {if (scaleIndex > 0.3) {scaleIndex -= 0.2item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'}
}// 还原
function onReductionImg (item) {scaleIndex = 1item.style.transform = 'scale('+scaleIndex+')'rotateIndex = 0item.style.transform = 'rotate('+rotateIndex+'deg)'offsetX = 0offsetY = 0canMove = falseitem.style.top = '0'item.style.left = '0'item.style.right = '0'
}// 旋转
function onRotateImg (item) {rotateIndex += 90item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'
}// 关闭
function onCloseDom (item, bodyDom) {scaleIndex = 1rotateIndex = 0item.remove()bodyDom.style.overflow = ''
}// 记录位置
function onPositionImg (e, itemDiv, itemImg) {let evt = e || eventcanMove = trueoffsetX = evt.clientX - itemImg.offsetLeftoffsetY = evt.clientY - itemImg.offsetTopdocument.onmousemove = function (e) {onDragImg (e, itemImg)}document.onmouseup = function () {onDragCloseImg ()}
}// 拖拽
function onDragImg (e, item) {let evt = e || eventif (canMove === true) {evt.preventDefault()let left = evt.clientX - offsetXlet top = evt.clientY - offsetYitem.style.right = ''item.style.left = left + "px"item.style.top = top + "px"}
}// 鼠标抬起关闭拖拽
function onDragCloseImg () {canMove = falsedocument.onmousemove = null
}

gitee仓库：myphoto-layer: 轻量级图片查看器

博客：我的个人日志

效果图


http://chatgpt.dhexx.cn/article/9uZoxHOS.shtml

相关文章

vue-quill-editor上传图片

vue-quill-editor上传图片

问题&#xff1a; vue-quill-editor富文本编辑器上传图片默认为base64&#xff0c;存入数据库过于过于庞大&#xff0c;使用quill-image-extend-modulevue-quill-editor实现图片地址上传。 解决完之后效果图&#xff1a; 解决思路&#xff1a; 哈哈&#xff0c;第一步当然去…
阅读更多...
unity UI 加入image图片

unity UI 加入image图片

1.新建画布&#xff0c;新建image. 2.我们发现这个时候把Assets里的图片直接拖到Image上是行不通的。原因就是此时的图片没有设为sprite. 处理方法&#xff1a;点击图片&#xff0c;修改Texture Type为Sprite. 下图左边图片为调整后&#xff0c;右边图片为没有调整. 3.调整后就…
阅读更多...
js预览本地图片

js预览本地图片

本地图片在上传服务器前&#xff0c;如何预览效果&#xff1f; 一个方法就可以了&#xff0c;主要是如何从事件中读取文件数据&#xff0c;放到<img>展示 幸运的是&#xff0c;事件中的图片数据已经被转换成<img>可直接识别的内容&#xff0c;直接赋值给<img&g…
阅读更多...
python QT 图片缩放，移动

python QT 图片缩放，移动

python QT graphicsView控件实现图片的缩放与移动 1、效果图2、界面搭建3、实现方法3.1、构建处理图元的类3.1、绘制图像3.2、拖拽方法实现3.3、缩放方法实现 4、调用方法 1、效果图 选择图片后可在graphicsView窗口中显示选择的图片&#xff0c;可以用鼠标拖拽图片。当鼠标停…
阅读更多...
Unity UI修改Image中的图片资源

Unity UI修改Image中的图片资源

Unity UI修改Image中的图片资源 一、取资源文件 把资质文件放到Assets文件夹下Resources文件中。 二、在属性面板下修改图片类型 三、在脚本中修改需要修改的资源 Sprite sprite Resources.Load(“Images/2”); //Images文件夹下名为2的图片 Image2.sprite sprite; //修改…
阅读更多...
Linux命令scp用法

Linux命令scp用法

本文主要讲的是scp用法如果哪里不对欢迎指出&#xff0c;主页https://blog.csdn.net/qq_57785602?typeblog scp 可以在win系统使用&#xff0c;本文百分之八十写的是win系统怎么使用&#xff0c;在本地上到服务器文件,从服务器下载文件到本地 用工具连接到公司服务器时&#x…
阅读更多...
linux远程cp命令,Linux cp scp命令使用

linux远程cp命令,Linux cp scp命令使用

cp 拷贝命令&#xff0c;用来对文件或者子目录进行拷贝操作的。 scp 是secure copy的简写&#xff0c;用于在Linux下进行远程拷贝文件的命令&#xff0c;和它类似的命令有cp&#xff0c;不过cp只是在本机进行拷贝不能跨服务器&#xff0c;而且scp传输是加密的。可能会稍微影…
阅读更多...
linux 使用scp命令,Linux scp命令使用实例汇总

linux 使用scp命令,Linux scp命令使用实例汇总

Linux下要实现两台服务器之间的文件传送&#xff0c;使用scp命令就可以了&#xff0c;在Linux系统中&#xff0c;scp命令的用法简单而又实用&#xff0c;系统之家就给大家介绍下如何使用scp命令进行Linux服务器之间的文件传送。 scp是secure copy的简写&#xff0c;用于在Linux…
阅读更多...
linux中scp命令用法

linux中scp命令用法

问题&#xff1a;经常用到文件分发到另一个机器&#xff0c;怎么做&#xff1f; 每次连接一个机器&#xff0c;把压缩包上传上去&#xff0c;然后解压修改&#xff0c;这样在太麻烦。linux的cp命令可以复制文件&#xff0c;能不能吧修改好的文件复制过去呢&#xff1f; 一、cp…
阅读更多...
scp命令的使用

scp命令的使用

Linux scp 命令用于 Linux 之间复制文件和目录&#xff1b;scp 是 secure copy 的缩写, scp 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令&#xff1b;scp 是加密的&#xff0c;rcp 是不加密的&#xff0c;scp 是 rcp 的加强版。 用法&#xff1a; scp [可选参数]…
阅读更多...
scp命令使用方法

scp命令使用方法

scp 命令是用于通过 SSH 协议安全地将文件复制到远程系统和从远程系统复制文件到本地的命令。使用 SSH 意味着它享有与 SSH 相同级别的数据加密&#xff0c;因此被认为是跨两个远程主机传输文件的安全方式。 基本语法 下面提供了 SCP 命令的基本语法&#xff1a; $ scp [opt…
阅读更多...
unity仓库管理简易模型(一)

unity仓库管理简易模型(一)

1. 环境 unity2018 2. 运行截图 3. 功能 1. 场景漫游 提供第一视角模式和自由模式。第一视角使用unity自带的角色控制器包实现角色移动视角移动&#xff0c;自由模式实现鼠标拖拽&#xff0c;场景缩放。 2. 商品定位 通过输入商品信息&#xff0c;在三维场景中定位到商品…
阅读更多...
计算机网络基础（类别 | 性能指标 | OSI模型初识）

计算机网络基础（类别 | 性能指标 | OSI模型初识）

目录 计算机网络类别 根据作用的范围分类 局域网&#xff08;LAN&#xff09; 广域网&#xff08;WAN&#xff09; 根据使用者分类 按照拓扑结构来分类 按照交换方式分类 按照工作方式分类 性能指标 什么是带宽 速率 吞吐量 时延 传播时延和带宽的乘积 往返时间…
阅读更多...
（附源码）springboot学生宿舍管理系统 毕业设计 211955

（附源码）springboot学生宿舍管理系统 毕业设计 211955

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…
阅读更多...
数据蛙9套SQL面试题笔记

数据蛙9套SQL面试题笔记

数据分析SQL面试题目9套汇总 题目来源&#xff1a; https://www.jianshu.com/p/0f165dcf9525 关于这套题的笔记 一、 解题思路&#xff1a; 1、用concat实现连接 2、还需要按照“用户号”分组&#xff0c;将每组中的前两个“场景”号间接&#xff0c;这时需要用到 GROUP_C…
阅读更多...
tp6中无限极分类里面的获取多级分类数据

tp6中无限极分类里面的获取多级分类数据

作者&#xff1a;陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 文章目录 前言一、什么是多级分类数据&#xff1f;二、使用步骤sql代码2.效果图 总结 前言 和大家共同完成获取多级分类数据 一、什么是多级分类数据&#xff1f; 就是很多很多的数据&#xff0c;按照…
阅读更多...
基于Gazebo的无人机管道检测

基于Gazebo的无人机管道检测

管道检测正式版本 1.需求分析 面对管道沿线地势起势大、道路崎岖难走&#xff0c;沿途穿越河流、沟谷、沼泽地纵多&#xff0c; 杂草植被茂密&#xff0c;无巡检通道等现状&#xff0c;人工巡检暴露出明显缺陷&#xff0c;车辆无法到达,需要跋山涉水徒步进行&#xff0c;巡护时…
阅读更多...
【期末复习】第二章 关系数据库

【期末复习】第二章 关系数据库

博主介绍&#xff1a; – 我是了 凡 微信公众号【了凡银河系】期待你的关注。未来大家一起加油啊~ 文章目录 2.1 关系数据结构及形式化定义2.1.1 关系2.1.2 关系模式2.1.3 关系数据库2.1.4 关系模型的存储结构 2.2 关系操作(了解关系操作具体怎么做)2.2.1 基本的关系操作2.2.2…
阅读更多...
SQL数据库的整体结构、索引、MVCC、锁、日志、查询优化，三大范式等

SQL数据库的整体结构、索引、MVCC、锁、日志、查询优化，三大范式等

关系型数据库和非关系型数据库 SQL:关系型数据库指的是使用关系模型&#xff08;二维表格模型&#xff09;来组织数据的数据库。(mysql,sqlserver,sqllite,oracle) 关系数据库的优点&#xff1a; 容易理解&#xff0c;符合正常思维方式&#xff1b;都是用表格形式&#xff0c;格…
阅读更多...
ubuntu mysql执行sql文件

ubuntu mysql执行sql文件

1、altt打开终端&#xff0c;输入mysql -u root -p回车&#xff0c;输入密码再次回车&#xff0c;进入mysql。 2、如果sql文件中包含建库和建表语句&#xff0c;直接输入source 路径/xxx.sql&#xff0c;比如我的是source /home/dzh/Software/DataBase_Creater.sql&#xff1b;…
阅读更多...
推荐文章

Copyright @ 2022~2023