图片查看器 Viewer.js
插件简介
Viewer.js 是一款强大的图片查看器，提供了纯 JS 版本和 jQuery 版本，具有以下特点：
- 支持移动设备触摸事件
- 支持响应式
- 支持放大、缩小
- 支持旋转（类似微博的图片旋转）
- 支持水平、垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式（可做屏保）
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
官网地址：http://fengyuanchen.github.io/viewerjs/
详细说明：http://www.dowebok.com/192.html
使用步骤
1、下载并引入资源文件
GitHub 下载（JS 版本）：https://github.com/fengyuanchen/viewerjs
GitHub 下载（jQuery 版本）：https://github.com/fengyuanchen/viewer
注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用，请正确下载需要的版本。
JS 版本引入：
<link rel="stylesheet" href="css/viewer.min.css"/>
<script src="js/viewer.min.js"></script>jQuery 版本引入：
<link rel="stylesheet" href="css/viewer.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>2、Html 页面代码
<ul id="dowebok"><li><img src="img/small01.jpg" alt="图片1"></li><li><img src="img/small02.jpg" alt="图片2"></li><li><img src="img/small03.jpg" alt="图片3"></li>
</ul>3、JavaScript 代码
JS 版本：
//new Viewer(element[,options])
var viewer = new Viewer(document.getElementById('dowebok'));jQuery 版本：
//$().viewer([options])
$('#dowebok').viewer();options 参数配置
|
名称 |
类型 |
默认值 |
说明 |
|
backdrop |
Boolean String |
true |
启用 modal，为 false 的时候不支持点击背景关闭 |
|
button |
Boolean |
true |
是否显示右上角的关闭按钮 |
|
navbar |
Boolean Number |
true |
是否显示底部导航栏 0 或 false：不显示 1 或 true：显示 2：当屏幕宽度大于 768px 时显示 3：当屏幕宽度大于 992px 时显示 4：当屏幕宽度大于 1200px 时显示 |
|
title |
Boolean Number Function Array |
true |
是否显示标题内容，默认显示 alt 属性内容和尺寸 0 或 false：不显示 1 或 true 或 function 或 array：显示 2：当屏幕宽度大于 768px 时显示 3：当屏幕宽度大于 992px 时显示 4：当屏幕宽度大于 1200px 时显示 function：在函数体内返回标题内容 array：第一个参数表示可见性(0-4)，第二个参数表示标题内容 |
|
toolbar |
Boolean Number Object |
true |
工具栏是否显示和布局 0 或 false：不显示 1 或 true：显示 2：当屏幕宽度大于 768px 时显示 3：当屏幕宽度大于 992px 时显示 4：当屏幕宽度大于 1200px 时显示 object：请看下面 Object 类型详解 |
|
className |
String |
'' |
添加到查看器的要元素的自定义类名 |
|
container |
Element String |
'body' |
将查看器置于 modal 模式的容器 只有在 inline 为 false 时才可以使用 |
|
filter |
Function |
null |
过滤图像以便查看（图像是可见的，应返回 true） |
|
fullscreen |
Boolean |
true |
播放时是否全屏 |
|
initialViewIndex |
Number |
0 |
定义用于查看的图像的初始索引 |
|
inline |
Boolean |
false |
是否启用 inline 模式 |
|
interval |
Number |
5000 |
播放间隔，单位为毫秒 |
|
keyboard |
Boolean |
true |
是否启用键盘支持 |
|
loading |
Boolean |
true |
加载图片时是否显示 loading 图标 |
|
loop |
Boolean |
true |
是否可以循环查看图片 |
|
minWidth |
Number |
200 |
定义图片查看器的最小的宽度 |
|
minHeight |
Number |
100 |
定义图片查看器的最小的高度 |
|
movable |
Boolean |
true |
是否可以拖动图片 |
|
zoomable |
Boolean |
true |
是否可以缩放图片 |
|
rotatable |
Boolean |
true |
是否可以旋转图片 |
|
scalable |
Boolean |
true |
是否可以翻转图片 |
|
toggleOnDblclick |
Boolean |
true |
当你放大或缩小图片时，是否可以双击还原 |
|
tooltip |
Boolean |
true |
放大或缩小时，是否显示百分比的文字提示 |
|
transition |
Boolean |
true |
是否使用 CSS3 过度 |
|
zIndex |
Number |
2015 |
在 modal 模式下定义查看器的 z-index 值 |
|
zIndexInline |
Number |
0 |
在 inline 模式下定义查看器的 z-index 值 |
|
zoomRatio |
Number |
0.1 |
鼠标滚动时的缩放比例 |
|
minZoomRatio |
Number |
0.01 |
最小缩放比例 |
|
maxZoomRatio |
Number |
100 |
最大缩放比例 |
|
url |
String Function |
'src' |
原始图像 URL 字符串：应该是图像元素的属性之一 函数：应该返回一个有效的图像 URL |
|
ready |
Function |
null |
当打开图片查看器时被触发，只会触发一次 |
|
show |
Function |
null |
当打开图片查看器时被触发，每次都触发 |
|
shown |
Function |
null |
当打开图片查看器完成时被触发，每次都会触发，在 show 之后 |
|
hide |
Function |
null |
当关闭图片查看器时被触发，每次都会触发 |
|
hidden |
Function |
null |
当关闭图片查看器完成时被触发，每次都会触发，在 hide 之后 |
|
view |
Function |
null |
当显示图片时被触发，每次都会触发，在 shown 之后 |
|
viewed |
Function |
null |
当显示图片完成时被触发，每次都会触发，在 view 之后 |
|
zoom |
Function |
null |
当图片缩放时被触发 |
|
zoomed |
Function |
null |
当图片缩放完成时被触发，在 zoom 之后 |
toolbar Object 类型详解
{ key: Number|Boolean }：显示或隐藏对应 key 的按钮，为 Number 的时候为可见性
{ key: String }：自定义按钮的大小
{ key: Function }：自定义按钮点击的处理
{ key: { show: Boolean|Number, size: String, click: Function } }：自定义按钮的每个属性
size 的取值范围：small、medium、default、large
key 值列表说明：
|
key 值名称 |
说明 |
|
zoomIn |
放大图片的按钮 |
|
zoomOut |
缩小图片的按钮 |
|
reset |
重置图片大小的按钮 |
|
prev |
查看上一张图片的按钮 |
|
next |
查看下一张图片的按钮 |
|
play |
播放图片的按钮 |
|
rotateLeft |
向左旋转图片的按钮 |
|
rotateRight |
向右旋转图片的按钮 |
|
flipHorizontal |
图片左右翻转的按钮 |
|
flipVertical |
图片上下翻转的按钮 |
浏览器兼容
|
|
|
|
|
|
|
Chrome |
Edge |
Firefox |
IE 8+ |
Opera |
Safari |
注意：JS 版本兼容 IE9+，jQuery 版本兼容 IE8+
预览效果
图片查看器 Viewer.js相关推荐
- html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略 ...
- 图片查看器viewer
最近在研究图片查看器,支持图片预览上一张,下一张,旋转,放大,缩小,拖拽. 发现大方美观的还是很少,bootstrap中有个插件叫inputfile.js,这个插件的图片预览没有旋转功能,也没有放大和 ...
- 强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...
- viewer图片查看器JQ版
viewer图片查看器JQ版 样例 html <!DOCTYPE html> <html lang="zh-Hans"><head><me ...
- 图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器 分类:代码 日期:2016-08-04 点击(282,284) 下载(1) 来源:未知 收藏 简介 Viewer.js 是一款强大的图片查看 ...
- viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
- Viewer.js Javascript/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
- 前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
- windows照片查看器没了_Secondary Display Photo Viewer(图片查看器)下载
Secondary Display Photo Viewer(图片查看器)是一款非常棒的图片查看类软件哦,这款软件能够帮助用户们进行幻灯片的查看使用等,1大量的编辑功能也让用户们喜爱哦~ Second ...
最新文章
- python list.pop 的方法的使用
- 临床基因组学数据分析实战助力解析Case，快速发表文章
- 大数据小视角3：CarbonData，来自华为的中国力量
- python 异常分类_python的异常处理
- Openstack部署工具
- Veeam在思科2017年合作伙伴峰会上荣获ISV年度最佳合作伙伴全球奖
- Linux计算求取文件长度
- 服务器 | 安装最新版R和Rstudio（3.5.3）
- C-V2X通信架构中，PC5接口和Uu接口的区别是什么？
- android——java.lang.IllegalStateException: Fatal Exception thrown on Scheduler
- 黎活明8天快速掌握android视频教程--21_监听ContentProvider中数据的变化
- Crazy Number---3755
- 计算平均成绩 (10分)
- css好看的图片投影,css3常见好看的投影效果_css3阴影box-shadow高大上用法
- 用canvas画钟，实时变化的钟
- Excel万金油公式IINDEX-SMALL-IF-ROW-超级匹配
- 几个非洲鼓的基本节奏
- 计算机及网络是把双刃剑,网络是把双刃剑
- 网络推广之论坛营销发帖推广
- 简单的php 后台管理系统,GitHub - luohuam/LP-ADMIN: 附带简单PHP框架的后台管理系统模板，适合新手...