</h1>
<div class="clear"></div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">
1|0一、简介
Viewer.js 是一款强大的图片查看器。
Viewer.js 有以下特点:
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转(类似微博的图片旋转)
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式(可做屏保)
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。
2|0二、下载
纯JS版本:https://github.com/fengyuanchen/viewerjs
jQuery 版本:https://github.com/fengyuanchen/jquery-viewer
3|0三、使用方法
3|11、直接引入文件
Javascript版:
jQuery版:
3|22、npm安装
3|33、Html结构
3|44、JavaScript
Javascript版:
jQuery 版:
4|0四、配置
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
inline | 布尔值 | false | 启用 inline 模式 |
button | 布尔值 | true | 显示右上角关闭按钮(jQuery 版本无效) |
navbar | 布尔值/整型 | true | 显示缩略图导航 |
title | 布尔值/整型 | true | 显示当前图片的标题(现实 alt 属性及图片尺寸) |
toolbar | 布尔值/整型 | true | 显示工具栏 |
tooltip | 布尔值 | true | 显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 使用 CSS3 过度 |
fullscreen | 布尔值 | true | 播放时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘 |
interval | 整型 | 5000 | 播放间隔,单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
maxZoomRatio | 数字 | 100 | 最大缩放比例 |
zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index |
url | 字符串/函数 | src | 设置大图片的 url |
build | 函数 | null | 回调函数,具体查看演示 |
built | 函数 | null | 回调函数,具体查看演示 |
show | 函数 | null | 回调函数,具体查看演示 |
shown | 函数 | null | 回调函数,具体查看演示 |
hide | 函数 | null | 回调函数,具体查看演示 |
hidden | 函数 | null | 回调函数,具体查看演示 |
view | 函数 | null | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |
__EOF__
![](https://images.cnblogs.com/cnblogs_com/Jimc/2203936/o_220816022332_profile.jpg)
本文作者:
寒爵
本文链接: https://www.cnblogs.com/Jimc/p/10132177.html
关于博主:评论和私信会在第一时间回复。或者 直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力!
本文链接: https://www.cnblogs.com/Jimc/p/10132177.html
关于博主:评论和私信会在第一时间回复。或者 直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力!
`在这里插入代码片`
分类:
JavaScript
<div id="blog_post_info">
2
0
<div class="clear"></div>
<div id="post_next_prev">
<a href="https://www.cnblogs.com/Jimc/p/10114657.html" class="p_n_p_prefix">« </a> 上一篇: <a href="https://www.cnblogs.com/Jimc/p/10114657.html" data-featured-image="" title="发布于 2018-12-13 16:17">深拷贝和浅拷贝</a>
<br>
<a href="https://www.cnblogs.com/Jimc/p/10151890.html" class="p_n_p_prefix">» </a> 下一篇: <a href="https://www.cnblogs.com/Jimc/p/10151890.html" data-featured-image="" title="发布于 2018-12-20 19:53">CAS单点登录(一):单点登录与CAS理论介绍</a>
</div><!--end: topics 文章、评论容器-->
· ASP.NET Core 6框架揭秘实例演示[37]:重定向的N种实现方式
· 理解 ASP.NET Core - 全球化&本地化&多语言
· [MAUI]写一个跨平台富文本编辑器
· 多方合作时,系统间的交互是怎么做的?
· 万字长文讲透 RocketMQ 4.X 消费逻辑
</div><!--end: forFlow -->
</div>
【推荐】公众号编辑器爱微笔记重装发布,借助AI全面升级公众号写作能力
【推荐】腾讯云爆款云服务器首年95元,领折上折代金券最高再省1120元
【推荐】中国云计算领导者:阿里云轻量应用服务器2核2G低至108元/年
【推荐】第五届金蝶云苍穹低代码开发大赛正式启动,百万奖金等你拿!