码迷,mamicode.com
首页 > Web开发 > 详细

jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

时间:2015-11-29 17:57:18      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转、放大、缩小、拖拽、缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同。

具体功能:

1. 多张图片切换,键盘左右键或左右箭头切换

2. 旋转

3. 放大,支持鼠标滚轮

4. 缩小,支持鼠标滚轮

5. 右下角缩略图

6. 拖拽大图

7. 全屏

技术分享

技术分享

PS:下面是插件各状态下效果,demo示例会在最后放出来。

全屏

全屏是容器的最大化。

技术分享

缩小

可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片。

技术分享

技术分享

放大

可以点击放大图标或者鼠标滚轮向上滚,可以放大图片。当图片长或宽大于容器时候,就会出现右下角的缩略图。

技术分享

技术分享

旋转

旋转是使用css3实现的。

技术分享

技术分享

拖拽图片

大图区域和缩略图区域都是可以拖拽的,可以通过拖拽查看图片某个位置。

技术分享

技术分享

旋转拖拽

实现插件过程中,这个是最困难的地方,旋转加上拖拽图片,计算方式复杂很多。

技术分享技术分享

切换图片

插件支持多张图片切换查看,可以通过键盘左右键或左右箭头切换。

技术分享

技术分享

总结

这个插件耗时4天才写好,难点在于图片旋转之后兼顾其他功能。实现的详情就不细说了,附上demo示例。

点击下载-> jquery-photo-gallery

PS:注意全屏、关闭的功能需要将示例部署起来才能演示,不然会有跨域问题。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5004951.html

jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

标签:

原文地址:http://www.cnblogs.com/lovesong/p/5004951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!