viewerJs介绍

Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。下图即为插件的演示样式：

Viewer.js 的特点

• 支持移动设备触摸事件 
• 支持响应式
• 支持放大/缩小
• 支持旋转（类似于微博的图片旋转）
• 支持水平/垂直翻转
• 支持图片移动
• 支持键盘
• 支持全屏幻灯片模式
• 支持缩略图
• 支持标题显示
• 支持多种自定义事件

用法实例

<ul id="viewer">
    <li><img data-original="img/tibet-1.jpg" src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img data-original="img/tibet-2.jpg" src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img data-original="img/tibet-3.jpg" src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img data-original="img/tibet-4.jpg" src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img data-original="img/tibet-5.jpg" src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img data-original="img/tibet-6.jpg" src="img/tibet-6.jpg" alt="图片6"></li>
</ul>

<script type="text/javascript">
    // 用法实例
    $('#viewer').viewer({
        url: 'data-original',
        title: false
    });
</script>

通过以上代码片段，我们即可使用viewerjs的图片查看功能。需要注意的是js 里面的内容，我们通过viewer方法绑定，即可定义那些图片需要进行查看。例子中的url 和 title 属于viewer方法的参数配置，通过参数配置我们可以调整部分样式。

viewer 函数参数说明

viewer({ }) 方法除了实例中提到的url 和 title 参数之外，还可以配置其他参数，具体的属性参数如下：

参数名称	类型	默认值	说明
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（10000%）	最大缩放比例
zIndex	整型	2015	图片查看器modal模式时z-index值
zIndexInline	整型	0	图片查看器inline模式时z-index值
url	字符串/函数	src	设置查看图片时的图片地址来源
build	函数	null	回调函数，viewer.js文件加载完成后调用
built	函数	null	回调函数，viewer函数初始化之前调用（只调用一次）
show	函数	null	回调函数，加载展示图层前调用
shown	函数	null	回调函数，加载展示图层完成后调用
hide	函数	null	回调函数，点击关闭展示按钮时调用
hidden	函数	null	回调函数，展示图层关闭前调用
view	函数	null	回调函数，加载展示图片前调用
viewed	函数	null	回调函数，展示图片加载完成时调用

后记

演示地址：http://www.dowebok.com/demo/192/index2.html

相关博客：https://www.cnblogs.com/Jimc/p/10132177.html

作者github：https://github.com/fengyuanchen/viewerjs

总的来说，Viewerjs虽然简单且易上手，但是却并不影响其在图片查看方面的强大功能。目前网上并没有完整的框架使用说明，作者在github上的使用手册也有很多不明确的地方，更多的是需要使用者自己通过演示地址包括其源码去分析理解。因为其简单，所以即使没有完整使用文档也不太影响其使用。

以下是完整的代码，包括插件代码和演示地址的页面的源码。

https://download.csdn.net/download/qq_41057885/19988143

如果后面被csdn改成了需要积分才能下载的话，私聊我即可。