jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

article/2025/11/11 5:27:52

前言

因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、平移、旋转，键盘控制等。插件的样式都是最基础的 CSS，定制非常容易，可以轻松修改成自己喜欢的样式。随后会陆续发布 React 及 Vue 相关版本的插件。本文主要介绍插件的特点及使用方法，而关于插件开发的细节将会在之后的具体文章中说明。

Github: https://github.com/nzbin/magnify

Website: https://nzbin.github.io/magnify

开发小记

由于最近工作繁忙，几乎每天都是晚上十点到家，然后开始编写插件，睡觉时已过凌晨，如今身心俱疲。因为没有找到相关的插件，所以很多问题都是绞尽脑汁独立思考，比如以鼠标为中心缩放图片、改变弹窗大小时对图片移动的限制、图片旋转之后的缩放、平移等问题，而开发插件最让人头疼的就是细节，甚至大部分时间是在修复单一功能的 bug 。

另外，开发插件的最大难度不是功能实现，而是如何设计插件，如何让插件的使用更简单、更方便。关于如何设计插件并不是本篇文章的重点，我会在之后专门写一篇介绍插件设计思想的文章。

插件所有的代码几乎都是在调整弹窗或者图片的 width、height、left、top ，所以兼容性问题不大，主要是 2D 旋转问题，IE 9 以下需要使用滤镜实现。为了方便调整样式，其中有很多相对位置的计算。

Magnify 采用了文件分离的方式编写，使用 npm 插件打包，并没有使用新语法，也没有使用现在流行的打包工具。使用 npm 工具已经是项目开发打包发布的一个趋势。

演示

如果你不想点开网址查看示例的话，可以通过下面的 CodePen 查看插件效果，除了视窗的大小之外，两种方式没有任何区别：

See the Pen A jQuery lightbox plugin to view images just like in Windows.

如果你的网速和其他原因不能打开 CodePen 的话，可以查看下面的图片演示。

主要功能

Magnify 的功能可以参考 Windows 照片查看器，基本完成了可以实现的所有功能。

1.模态窗拖拽

如果图片尺寸不大于展示区域，通过图片展示区域也可以拖拽弹窗。这和 QQ 图片查看器的操作方式是相同的。

这里写图片描述

2.模态窗调整大小

可以通过参数设置模态窗的最小宽高。目前的调整大小存在一点 bug，但不影响整体的使用。

这里写图片描述

3.模态窗最大化

这里写图片描述

4.图片缩放

可以通过鼠标滚轮、按钮、键盘等操作。

这里写图片描述

5.图片旋转

目前的图片旋转功能还没有添加支持 IE9 以下版本的代码。

这里写图片描述

6.键盘控制

Magnify 和 Windows 照片查看器的按键是一样的。

  • ← 上一张
  • → 下一张
  • + 放大
  • - 缩小
  • ctrl + alt + 0 实际尺寸
  • ctrl + , 向左旋转
  • ctrl + . 向右旋转

7.全屏显示

Magnify 的全屏显示只实现了基本的展示功能，还没有实现幻灯片自动轮播的功能。全屏环境下使用键盘控制图片。

使用方法

Magnify 的使用和其他大多数 lightbox 插件的用法并没有两样，如果你习惯了其它插件的使用，使用 Magnify 也不会有任何障碍。

1.需要引用的文件


<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

Magnify 默认使用 font-awesome 的图标，所以需要引用 font-awesome 的 css 文件。如果你想使用其它图标，可以修改 options 的 icons 参数。在之后的版本中，我可能会添加定制的字体图标文件或者使用 svg 图标。


<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.HTML 结构

Magnify 默认使用以下结构，这样的结构可以做兼容处理，也是大多数 lightbox 使用的结构。

<a data-magnify="gallery" href="big-1.jpg"><img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg"><img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg"><img src="small-3.jpg">
</a>

也可以使用下面更简洁的结构


<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

Magnify 的 HTML 结构包含以下几个选项

  • 添加 data-src 属性可以链接到大图。如果在 <a> 标签中使用，它会覆盖 href 属性的值。
  • 添加 data-caption 属性可以显示标题。如果你不使用这个属性，插件会显示 URL 中的图片名。
  • 添加 data-group 属性可以对图片分组。

3.初始化插件

如果在 HTML 中添加 data-magnify 属性，插件会自动初始化。

手动初始化插件的方法和所有 jQuery 插件一样：

$('[data-magnify=gallery]').magnify(options);

参数配置

options = {draggable: true,resizable: true,movable: true,keyboard: true,title: true,modalWidth: 320,modalHeight: 320,fixedContent: true,fixedModalSize: false,initMaximized: false,gapThreshold: 0.02,ratioThreshold: 0.1,minRatio: 0.1,maxRatio: 16,headToolbar: ['maximize','close'],footToolbar: ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight'],icons: {maximize: 'fa fa-window-maximize',close: 'fa fa-close',zoomIn: 'fa fa-search-plus',zoomOut: 'fa fa-search-minus',prev: 'fa fa-arrow-left',next: 'fa fa-arrow-right',fullscreen: 'fa fa-photo',actualSize: 'fa fa-arrows-alt',rotateLeft: 'fa fa-rotate-left',rotateRight: 'fa fa-rotate-right'}
}

关于插件参数的具体含义，我就不在此复制黏贴了，请大家参考 官方文档 的详细说明。如有问题，可以在此留言。

自定义样式

这里写图片描述

因为插件的样式比较简单，所以修改起来也比较容易。除了 Windows 照片查看器，QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果，但是部分功能比如缩略图还没有实现。

See the Pen Magnify with another viewer style

面对这样的图片查看器足以令人心旷神怡~

总结

目前插件整体已经趋于完善，但仍然有很多需要修改及添加的细节，尤其对移动端的支持，大家可以 star 一下随时关注项目的更新动态。关于插件的介绍就不再赘述了，如果大家发现了 Bug 或者有更好的建议，可以在 GitHub 中提问，也可以在此留言，大家的支持是我前进的最大动力！如果这款插件对你有帮助或者你在项目中使用了这款插件，欢迎留言告知！


http://chatgpt.dhexx.cn/article/63ImvetQ.shtml

相关文章

给图片查看器插件Magnify新增放大镜功能

给图片查看器插件Magnify新增放大镜功能

说实话Magnify图片查看器插件已经非常强大了,媲美Windows的图片查看器,但是,毕竟是开源插件,用起来简单,就是兼容性等各种bug问题。不过还好能用&#xff0c;自己优化一下就好。 在实际项目中&#xff0c;如果只是在页面简单的实现这个图片预览、放大、翻看等功能&#xff0c;…
阅读更多...
matlab利用magnify作图

matlab利用magnify作图

首先&#xff0c;在命令窗口输入magnify&#xff1b; 然后&#xff0c;按住ctrl鼠标左键&#xff0c;选中要看的区域&#xff1b;想要放大局部图片时&#xff0c;我们可以放开ctrl,去点击键&#xff0c;进行放大&#xff1b; 最后&#xff0c;可以放开鼠标左键&#xff0c;点击…
阅读更多...
Matlab制作局部放大图——magnify源码

Matlab制作局部放大图——magnify源码

Matlab制作局部放大图——magnify源码 写论文时会遇到需要用matlab做局部放大图的问题&#xff0c;好在matlab给出了magnify局部放大函数。下面是我做的一个小例子。 步骤&#xff1a; 1、先将magnify.m函数复制到包含图片的文件夹下。 2、plot出你要做局部放大图的图片&am…
阅读更多...
VBA入门到进阶常用知识代码总结77

VBA入门到进阶常用知识代码总结77

第77集 API基础 367、 API概述 API&#xff08;Application Programming Interface,应用程序编程接口&#xff09;是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节…
阅读更多...
认识VBA------------------VBA基础

认识VBA------------------VBA基础

一、前言 在最近的工作中&#xff0c;有幸了解到VBA相关的知识&#xff0c;它主要是被应用于我们平时所使用的word和Excel中&#xff0c;主要用VBA代码来进行数据处理&#xff0c;在办公领域使用的比较广泛。通过一段时间的学习&#xff0c;总结了一些自己的理解和所学&#xf…
阅读更多...
vba set语句_零基础学VBA编程06：什么是变量？

vba set语句_零基础学VBA编程06：什么是变量？

每天一篇原创Excel图文 微信公众号&#xff1a;Excel星球 NO.81-什么是变量&#xff1f; 作者&#xff1a;看见星光 微博&#xff1a;EXCELers / 知识星球&#xff1a;Excel 哈罗&#xff0c;大家好&#xff0c;我是星光&#xff0c;今天给大家聊一下编程中一个非常重要的概念—…
阅读更多...
Excel VBA使用总结

Excel VBA使用总结

Excel VBA 1.入门1.1开启VBA之旅 2.语法2.1清除单元格内容2.2vba设密码2.3以前的代码2.4使用正则2.5使用stack 都说世界上最好的语言就是PPT,工作报告&#xff0c;年度总结。。。。 到处都有它的身影&#xff0c;更是被高手设计的惟妙惟肖。 今天&#xff0c;我们不争第一&…
阅读更多...
VBA录制宏知识整理

VBA录制宏知识整理

XIWENJIE_VBA基础简介之录制宏 A.录制宏的使用 一、什么是宏 VBA是 [Visual Basic](https://baike.baidu.com/item/Visual Basic)的一种宏语言，是在其桌面应用程序中执行通用的自动化(OLE)任务的编程语言。主要能用来扩展Windows的应用程序功能，特别是[Microsoft Office](…
阅读更多...
excel VBA编程入门，自定义excel数据库模板生成sql语句

excel VBA编程入门，自定义excel数据库模板生成sql语句

文章目录 VBA基础一.了解VBA1.进入vba2.认识宏 二. VBA编程1.hello world2.调出立即窗口和本地窗口3.debug显示4.注释5.数据类型5.变量的生命周期和定义域6.判断语句7.不等于<> , switch case 条件判断8.循环do while退出循环的语句 exit for退出循环的语句 exit do 9.数…
阅读更多...
Excel Vba编程初探一

Excel Vba编程初探一

【场景】对EXCEL表格批量添加公式 【分析】 1、如何给单元格写值/公式 2、公式如何带变量 【Excel设置】 【实现】 0&#xff09;代码书写的地方 1&#xff09;代码 Sheet1被激活时触发 Private Sub Worksheet_Activate() Call SetFormula Call TestSetA1ToA10 End Sub函…
阅读更多...
二 详解VBA编程是什么

二 详解VBA编程是什么

详解VBA编程是什么 直到 90 年代早期,使应用程序自动化还是充满挑战性的领域.对每个需要自动化的应用程序,人们不得不学习一种不同的自动化语言.例如:可以用EXCEL的宏语言来使EXCEL自动化,使用WORD BASIC使WORD自动化,等等.微软决定让它开发出来的应用程序共享一种通用的自动化…
阅读更多...
CSS入门（二）

CSS入门（二）

CSS入门&#xff08;一&#xff09; https://blog.csdn.net/Veer_c/article/details/103882856 CSS文本属性和值&#xff1a; <style type"text/css"> div{/*设置字符间距*/letter-spacing:4px;/*设置文本的位置*/text-align:center;/*给文本设置上划/下划/中…
阅读更多...
【前端学习】CSS入门

【前端学习】CSS入门

前端学习&#xff1a;CSS入门 文章目录 前端学习&#xff1a;CSS入门前言1、class011.我的第一个CSS2.导入方式3.基本选择器(1)ID选择器(2)标签选择器(3)类选择器 4.层次选择器5.结构伪类选择器6.属性选择器 2、class021.span/div2.字体样式3.文本样式4.超链接伪类5.列表 3、cl…
阅读更多...
CSS入门必备基础（适合小白）

CSS入门必备基础（适合小白）

CSS入门必备基础&#xff08;适合小白&#xff09; 一、CSS是什么&#xff1f;1、什么是CSS&#xff1f;2、CSS有什么作用&#xff1f; 二、CSS核心基础1、CSS样式规则2、引入CSS的方法1)、行内式2)、内嵌式3)、链入式 2、CSS选择器1)、基础选择器2)、后代选择器3)、并集选择器…
阅读更多...
网页搭建入门---CSS入门

网页搭建入门---CSS入门

目录 CSS基础语法 CSS选择器 选择器 基于关系的选择器 伪类 伪元素 优先级别 CSS样式 背景 文本 ​ 字体 链接 列表 表格 ​ CSS布局 CSS盒子模型 边框 内边距 外边距 CSS基础语法 为什么要使用CSS 样式定义如何显示HTML元素是为了解决内容与表现分离的问…
阅读更多...
postcss入门

postcss入门

无需安装任何环境&#xff0c;即可在线体验未来的css生态系统。 一、什么是postcss 一个用 JavaScript 工具和插件转换 CSS 代码的工具&#xff0c;一套css的生态系统&#xff0c;通过组合插件的形式让我们更舒适的编写css。 二、它能做什么&#xff1f; 1.增强代码兼容性 …
阅读更多...
CSS基础入门（详细总结笔记）

CSS基础入门（详细总结笔记）

目录 1、CSS介绍 2、CSS引入方式 2.1、行内样式 2.2、内联样式 2.3、外联样式 2.4、样式的优先级 2.5、样式选择 3、CSS选择器 3.1、基本选择器 3.2、属性选择器 3.3、层级选择器 3.4、组合选择器 3.5、伪类选择器 3.6、通配符 3.7、选择器优先级 4、CSS盒子模…
阅读更多...
CSS入门。（仅供参考）

CSS入门。（仅供参考）

文档出处部分Coogle和《原创》&#xff0c;如有雷同纯属巧合 《仅供参考》 首先说明以下内容是本人自己整理&#xff08;仅供参考&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 首先浏览器我建议使用Googl…
阅读更多...
零基础CSS入门教程(17)–表格样式

零基础CSS入门教程(17)–表格样式

点此查看 所有教程、项目、源码导航 本文目录 1. 题外话2. 前言3. HTML表格边框4. CSS设定表格边框5. 设定列边框6. 折叠边框7. 表格尺寸8. 表格内边距9. 表格背景色10. 小结 1. 题外话 不知不觉&#xff0c;写到第40篇了。 可能已经是我写过的最长的系列文章了&#xff0c;虽…
阅读更多...
一套完整的CSS入门教程

一套完整的CSS入门教程

最近花了点时间&#xff0c;整理了一下之前的CSS博客文章&#xff0c;完成了这个CSS教程。也为我的个人网站&#xff0c;增加了一个教程模块。教程模块地址&#xff1a;请点击这里。教程地址&#xff1a;请点击这里。 该教程是一套完整的CSS入门教程&#xff0c;看了绝对不会…
阅读更多...
推荐文章

Copyright @ 2022~2023