Viewer.js 图片预览插件使用 |
您所在的位置：网站首页 › 图片查看器插件 › Viewer.js 图片预览插件使用 |
Viewer.js 图片预览插件使用
|
Viewer.js 图片预览插件使用
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安装 npm install viewerjs 3|33、Html结构 3|44、JavaScriptJavascript版： var image = new Viewer( document.getElementById( 'image'),{ url: 'data-original' }); var viewer = new Viewer( document.getElementById( 'viewer'),{ url: 'data-original' });jQuery 版： $( '#image').viewer({ url: 'data-original' }); $( '#viewer').viewer({ url: 'data-original' }); 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-indexzIndexInline数字0设置图片查看器 inline 模式时的 z-indexurl字符串/函数src设置大图片的 urlbuild函数null回调函数，具体查看演示built函数null回调函数，具体查看演示show函数null回调函数，具体查看演示shown函数null回调函数，具体查看演示hide函数null回调函数，具体查看演示hidden函数null回调函数，具体查看演示view函数null回调函数，具体查看演示viewed函数null回调函数，具体查看演示__EOF__ 
本文作者：
寒爵
本文链接：
https://www.cnblogs.com/Jimc/p/10132177.html
关于博主：评论和私信会在第一时间回复。或者
直接私信我。
版权声明：本博客所有文章除特别声明外，均采用
BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角
【推荐】一下。您的鼓励是博主的最大动力！
`在这里插入代码片`
分类:
JavaScript
好文要顶
关注我
收藏该文
寒爵
粉丝 - 122
关注 - 3
+加关注
2
0
« 上一篇： 深拷贝和浅拷贝
» 下一篇： CAS单点登录（一）：单点登录与CAS理论介绍
posted @
2018-12-17 16:17
寒爵 阅读(
17383) 评论(
1)
编辑
收藏
举报
刷新评论
刷新页面
返回顶部
登录后才能查看或发表评论，立即
登录 或者
逛逛 博客园首页
【推荐】园子资深博主直播，6月18日下午3点：冰蓝老师《ChatGPT 初探》
【推荐】公众号编辑器爱微笔记重装发布，借助AI全面升级公众号写作能力
【推荐】腾讯云爆款云服务器首年95元，领折上折代金券最高再省1120元
【推荐】中国云计算领导者：阿里云轻量应用服务器2核2G低至108元/年
【推荐】第五届金蝶云苍穹低代码开发大赛正式启动，百万奖金等你拿！
编辑推荐：
· ASP.NET Core 6框架揭秘实例演示[37]：重定向的N种实现方式 · 理解 ASP.NET Core - 全球化&本地化&多语言 · [MAUI]写一个跨平台富文本编辑器 · 多方合作时，系统间的交互是怎么做的？ · 万字长文讲透 RocketMQ 4.X 消费逻辑 即构专区： · AI 加持实时互动｜ZegoAvatar 面部表情随动技术解析 · 即构推出低延迟直播产品，全链路优化体验升级 · 零基础实现Java直播（一）：集成 · 零基础实现Java直播（二）：实现流程 · 【活动回顾】WebRTC服务端工程实践和优化探索 |
【本文地址】