jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

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

具体功能：

多张图片切换，键盘左右键或左右箭头切换
旋转
放大，支持鼠标滚轮
缩小，支持鼠标滚轮
右下角缩略图
拖拽大图
全屏

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

全屏
全屏是容器的最大化。

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

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

旋转
旋转是使用css3实现的。

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

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

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

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

我把源代码放在网盘上了，有需要的可去下：http://pan.baidu.com/s/1bTWGnO

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

注意

浏览器兼容问题

由于我这个插件只需要在Chrome上使用（我现在项目的特别之处），所以其他浏览器我并没有去做兼容，使得IE、firefox浏览器都相应会有一些问题。像旋转在IE9以下当然用不了（css3的原因），拖拽也会因为方法或属性的不兼容导致有问题。

PS：所以如果要使用我的插件，估计需要对插件做一些兼容处理，不然就得等我找时间做了。

拖拽不平滑

这个问题我也发现了，确实是在大图拖拽时候有卡顿现象，这个我也将稍后修复。

20160312修复问题

修复了拖拽不平滑问题。
对Firefox、Chrome、Safari、IE9+进行兼容。

PS：暂时没有考虑兼容IE9以下。

原文链接：http://www.cnblogs.com/lovesong/p/5004951.html

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）相关推荐

强大的jQuery幻灯片播放插件支持全拼、拖拽和下载等功能
强大的jQuery幻灯片播放插件支持全拼.拖拽和下载等功能在线演示本地下载 posted @ 2018-11-29 11:30 栖息地阅读(...) 评论(...) 编辑收藏
vue实现鼠标滚动图片放大缩小拖拽
1.封装可放大缩小拖拽组件 <template><div class="drag-outer"ref="dragWrap":style=&qu ...
使用 Fresco 实现大图浏览（支持手势放大、拖拽）
一.Fresco简介 Fresco是facebook出品的一款图片加载框架,使用了Fresco之后,不需要再考虑图片的加载和内存占用的问题,堪称图片加载的神器.Fresco将图片存储到一个特殊的区域, ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现
首先哈,quill-editor没有对图片的功能,文档里也有提到扩展模版文档: 回归正题=> 1.安装模版 npm i quill-image-drop-module -S //拖拽 npm ...
vue 实现图片放大缩小拖拽
https://www.h5w3.com/239173.html https://blog.51cto.com/wjw1014/5411219 // 放大缩小public setTransform ( ...
canvas 实现图片放大缩小拖拽移动端、PC端
前言实现目标:使用canvas画出地图,且可以通过鼠标滚轮缩放,拖拽:手指滑动拖拽,手势缩放 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dW ...
bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...
js 实现 H5 div的内容放大缩小拖拽功能 vue可用
大佬写的组件 , 虽然我看不懂但不妨碍我会用啊想去看大佬代码的点这里下面的无脑的代码时刻一.复制代码到一个单独的.vue文件然后走人去下一步 // 放大缩小页面组件 <template ...
vue-draggable-resizable放大缩小拖拽功能
效果图 1.下载依赖 npm install --save vue-draggable-resizable main.js引入 import VueDraggableResizable from 'v ...

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）相关推荐

最新文章

热门文章