分享一款强大的图片预览组件：Viewer.js
介绍
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。这是作者github地址：https://github.com/fengyuanchen/viewerjs 下图即为插件的演示样式：
特点
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转（类似微博的图片旋转）
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式（可做屏保）
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
如何使用？
可以直接引入cdn链接或者下载到本地引入：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.0/viewer.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script><ul id="viewer">
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="1"></li>
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="2"></li>
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="3"></li>
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="4"></li>
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="5"></li>
<li><img width="500" src="frontPage/img/d4092c6f30206b5792721d06ae2a2483.jpg" alt="6"></li>
</ul>
<script type="text/javascript">
// 用法实例
new Viewer(document.getElementById('viewer'),{
title: false,
rotatable: false,
scalable: false,
fullsreen: false,
zoomRatio: 0.5,
});
</script>new Viewer的参数说明
参数名称 | 类型 | 默认值 | 参数说明 |
|---|---|---|---|
url | 字符串/函数 | src | 设置查看图片时的图片地址来源 |
inline | 布尔值 | false | 是否启用inline模式 |
button | 布尔值 | true | 是否显示右上角关闭按钮 |
navbar | 布尔值 | true | 是否显示缩略图导航 |
title | 布尔值 | true | 是否显示当前图片的标题 |
toolbar | 布尔值 | true | 是否显示工具栏 |
tooltip | 布尔值 | true | 是否显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 是否使用CSS3过度 |
fullsreen | 布尔值 | true | 播放幻灯片时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘操作 |
interval | 整型 | 5000 | 播放间隔，单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚轮滚动时缩放比例 |
minZoomRatio | 浮点型 | 0.01(1%) | 最小缩放比例 |
maxZoomRatio | 整型 | 100 | 最大缩放比例 |
zIndex | 整型 | 2015 | 图片查看器modal模式时z-index值 |
zIndexInline | 整型 | 0 | 图片查看器inline模式时z-index值 |
build | 函数 | null | 回调函数，viewer.js文件加载完成后调用 |
built | 函数 | null | 回调函数，viewer函数初始化之前调用（只调用一次） |
show | 函数 | null | 回调函数，加载展示图层前调用 |
shown | 函数 | null | 回调函数，加载展示图层完成后调用 |
hide | 函数 | null | 回调函数，点击关闭展示按钮时调用 |
hidden | 函数 | null | 回调函数，展示图层关闭前调用 |
view | 函数 | null | 回调函数，加载展示图片前调用 |
viewed | 函数 | null | 回调函数，展示图片加载完成时调用 |