前言
因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款jQuery图片查看器插件放大,它实现了窗户照片查看器的所有功能,比如模态窗的拖拽,调整大小,最大化,图片的缩放,旋转,平移,键盘控制等。插件的样式都是最基础的CSS,定制非常容易,可以轻松修改成自己喜欢的样式。随后会陆续发布反应及Vue相关版本的插件。本文主要介绍插件的特点及使用方法,而关于插件开发的细节将会在之后的具体文章中说明。
Github: https://github.com/nzbin/magnify
网站:,https://nzbin.github.io/magnify
开发小记
由于最近工作繁忙,几乎每天都是晚上十点到的家,然后开始编写插件,睡觉时已过凌晨,如今身心俱疲。因为没有找到相关的插件,所以很多问题都是绞尽脑汁独立思考,比如以鼠标为中心缩放图片,改变弹窗大小时对图片移动的限制,图片旋转之后的缩放,平移等问题,而开发插件最让人头疼的就是细节,甚至大部分时间是在修复单一功能的bug。
另外,开发插件的最大难度不是功能实现,而是如何设计插件,如何让插件的使用更简单,更方便。关于如何设计插件并不是本篇文章的重点,我会在之后专门写一篇介绍插件设计思想的文章。
插件所有的代码几乎都是在调整弹窗或者图片的宽度,高度,左,前,所以兼容性问题不大,主要是2 d旋转问题,IE 9以下需要使用滤镜实现。为了方便调整样式,其中有很多相对位置的计算。
放大采用了文件分离的方式编写,使用npm插件打包,并没有使用新语法,也没有使用现在流行的打包工具。使用npm工具已经是项目开发打包发布的一个趋势。
演示
如果你不想点开网址查看示例的话,可以通过下面的CodePen查看插件效果,除了视窗的大小之外,两种方式没有任何区别:
如果你的网速和其他原因不能打开codepen的话,可以查看下面的图片演示。
主要功能
放大的功能可以参考窗户照片查看器,基本完成了可以实现的所有功能。
如果图片尺寸不大于展示区域,通过图片展示区域也可以拖拽弹窗。这和QQ图片查看器的操作方式是相同的。
目前的调整大小存在一点错误,但不影响整体的使用。
除了弹窗最大化,开发初期也设计了最小化的功能,但感觉有些鸡肋,所以暂时没有添加。
可以通过鼠标滚轮,按钮,键盘等操作
目前的图片旋转功能还没有添加支持IE9以下版本的代码。
放大和窗户照片查看器的按键是一样的
<代码>←上一张<代码>→下一张<代码> +> - 缩小<代码> ctrl + alt + 0 实际尺寸<代码> ctrl +,> ctrl +。向右旋转7。全屏显示
放大的全屏显示只实现了基本的展示功能,还没有实现幻灯片自动轮播的功能,全屏环境下使用键盘控制图片。
使用方法
放大的使用和其他大多数lightbox插件的用法并没有两样,如果你习惯了其它插件的使用,使用放大也不会有任何障碍。
1。需要引用的文件
<>之前 & lt;链接的href=" https://www.yisu.com/path/to/magnify.css " rel=巴獠縩ofollow”rel=把奖怼北? & lt;脚本src=" https://www.yisu.com/path/to/jquery.js "祝辞& lt;/script> & lt;脚本src=" https://www.yisu.com/path/to/jquery.magnify.js "祝辞& lt;/script>
