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改成了需要积分才能下载的话,私聊我即可。