前言因为一些特殊的业务需求，经过一个多月的蛰伏和思考，开发了这个jQuery图片查看器插件Magnify，它实现了Windows照片查看器的所有功能，如拖动、调整大小、最大化模态窗口、缩放、平移、旋转图像、键盘控制等。插件的样式是最基本的CSS，非常容易实现自定义并可以轻松修改为您喜欢的样式。React和Vue相关版本的插件会陆续发布。本文主要介绍插件的特点和使用方法，关于插件的开发细节将在后面的具体文章中进行讲解。Github:https://github.com/nzbin/magnify网站:https://nzbin.github.io/magnify开发笔记由于最近工作比较忙，几乎每天晚上十点到家，然后开始写插件-插件。一早过后，现在身心俱疲。因为没有找到相关插件，所以绞尽脑汁独立思考了很多问题，比如以鼠标为中心缩放图片，改变弹窗大小时限制图片移动，图片旋转后缩放和平移等.,而开发插件最头疼的就是细节问题，甚至大部分时间都是修复单个功能的bug。另外，开发插件最大的难点不在于功能实现，而在于如何设计插件，如何让插件更简单、更方便的使用。如何设计插件不是本文的重点。后面会写一篇介绍插件设计思路的文章。插件的代码几乎都是调整弹窗或图片的宽高左上，所以兼容性问题不大，主要问题是2D旋转，IE9及以下需要使用过滤器来实现。为了方便样式的调整，有很多相对位置的计算。Magnify以文件分离的方式编写，使用npm插件打包，没有使用新的语法或流行的打包工具。使用npm工具已经是项目开发和包发布的趋势。Demo如果不想点击网址查看示例，可以通过下面的CodePen查看插件效果，除了窗口大小不同，两种方式没有区别：SeethePen一个jQuery灯箱插件，可以像在Windows中一样查看图像。如果您因为网速或其他原因无法打开CodePen，您可以查看下面的图片演示。主要功能Magnify的功能可以参考WindowsPhotoViewer，基本完成了所有可以实现的功能。1.拖拽模态窗口如果图片大小不大于显示区域，也可以将弹窗拖过图片显示区域。这个和QQ看图的操作方法是一样的。2.模态窗口调整大小可以通过参数设置模态窗口的最小宽度和高度。目前调整大小有一点bug，但不影响整体使用。3.最大化模态窗口除了最大化弹窗外，开发初期也设计了最小化功能，但感觉有点鸡肋，所以暂时没有加入。4、图片缩放可以通过鼠标滚轮、按键、键盘等进行操作。5、图片旋转目前图片旋转功能还没有添加代码支持IE9以下版本。6.键盘控件Magnify和WindowsPhotoViewer具有相同的键。←上一个→下一个+放大-缩小ctrl+alt+0实际大小ctrl+，向左旋转ctrl+。幻灯片自动轮播功能。在全屏环境下使用键盘控制图片。如何使用Magnify的使用方式与大多数其他灯箱插件相同。如果您习惯了其他插件，使用Magnify不会有任何障碍。1、需要引用的文件Magnify默认使用font-awesome图标，所以你需要引用font-awesomecss文件。如果要使用其他图标，可以修改options的icons参数。在以后的版本中，我可能会添加自定义字体图标文件或使用svg图标。2。HTML结构Magnify默认使用如下结构，所以的结构可以做兼容处理，也是大部分灯箱使用的结构。你也可以使用下面更简洁的结构Magnify的HTML结构包含以下选项添加data-src属性可以链接到更大的图像。如果在标签内使用，它会覆盖href属性的值。添加data-caption属性以显示标题。如果您不使用此属性，插件将在URL中显示图像名称。将数据组属性添加到组图像。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,headToolbarose:['maximize','],footToolbar:['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight'],icons:{最大化:'fafa-window-maximize',close:'fafa-close',zoomIn:'fafa-search-plus',zoomOut:'fafa-search-minus',prev:'fafa-arrow-left',next:'fafa-arrow-right',fullscreen:'fafa-photo',actualSize:'fafa-arrows-alt',rotateLeft:'fafa-rotate-left',rotateRight:'fafa-rotate-right'}}关于插件参数的具体含义，这里就不复制粘贴了，请参考官方文档的详细说明，以后的参数变动不再在博客更新。如果您有任何疑问，可以在这里留言。自定义样式因为插件的样式比较简单，修改起来比较容易。除了Windows的图片查看器，QQ的图片查看器也非常高大上。我们只要简单修改一下就可以实现QQ图片查看器的效果，但是缩略图等一些功能还没有实现。使用另一种查看器样式查看PenMagnify。面对这样的看图，足以让人心旷神怡。综上所述，插件整体已经趋于完善，但还有很多细节需要修改和补充，尤其是对移动端的支持。您可以为它加注星标，敬请关注该项目的更新。关于插件的介绍我就不赘述了。如果发现bug或者有更好的建议，可以在GitHub提问或者在这里留言。您的支持是我前进最大的动力！如果本插件对您有帮助或者您在项目中使用了本插件，欢迎留言告诉我们！
