插件简介
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 版本:
var viewer = new Viewer(document.getElementById('dowebok'));
//new Viewer(element[,options])
jQuery 版本:
$('#dowebok').viewer();
/$().viewer([options])
options 参数配置
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 值列表说明: