jQuery图片查看插件Magnify开发详解-创新互联

前言

创新互联公司2013年至今,是专业互联网技术服务公司,拥有项目成都做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元南涧做网站,已为上家服务,为南涧各地企业和个人服务,联系电话:13518219792

因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 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 查看插件效果,除了视窗的大小之外,两种方式没有任何区别:

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

主要功能

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

1.模态窗拖拽

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

jQuery图片查看插件Magnify开发详解

2.模态窗调整大小

目前的调整大小存在一点 bug,但不影响整体的使用。

jQuery图片查看插件Magnify开发详解

3.模态窗大化

除了弹窗大化,开发初期也设计了最小化的功能,但感觉有些鸡肋,所以暂时没有添加。

jQuery图片查看插件Magnify开发详解

4.图片缩放

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

jQuery图片查看插件Magnify开发详解

5.图片旋转

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

jQuery图片查看插件Magnify开发详解

6.键盘控制

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

上一张 下一张 + 放大 - 缩小 ctrl + alt + 0 实际尺寸 ctrl + , 向左旋转 ctrl + . 向右旋转 7.全屏显示

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

使用方法

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

1.需要引用的文件



另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:jQuery图片查看插件Magnify开发详解-创新互联
网址分享:http://scyanting.com/article/hcces.html