当前位置 :首页 > 网页特效 > 图片效果 > 兼容移动端与电脑端的图片查看器viewer.js插件

兼容移动端与电脑端的图片查看器viewer.js插件

157 0 时间:2019-07-04 10:39  查看评论 (0)
内容摘要:Viewer.js 是一款强大的JS图片查看与图片浏览插件,能适应不同的设备终端,在手机与电脑上都有完美的显示效果

Viewer.js 有以下特点:

  • 支持移动设备触摸事件

  • 支持响应式

  • 支持放大/缩小

  • 支持旋转(类似微博的图片旋转)

  • 支持水平/垂直翻转

  • 支持图片移动

  • 支持键盘

  • 支持全屏幻灯片模式(可做屏保)

  • 支持缩略图

  • 支持标题显示

  • 支持多种自定义事件

Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。

使用方法

引入文件
Javascript版:

<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>

Html结构

<ul id="viewer">
    <li><img src="img/viewer1.jpg" alt="图片1"></li>
    <li><img src="img/viewer2.jpg" alt="图片2"></li>
    <li><img src="img/viewer3.jpg" alt="图片3"></li>
    <li><img src="img/viewer4.jpg" alt="图片4"></li>
    <li><img src="img/viewer5.jpg" alt="图片5"></li>
    <li><img src="img/viewer6.jpg" alt="图片6"></li>
</ul>

JavaScript
Javascript版:

var viewer = new Viewer(document.getElementById('viewer'));

jQuery 版:

$('#viewer').viewer();

配置

名称类型默认值说明
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回调函数,具体查看演示


标签: 图片查看

讨论这个项目(0)回答他人问题有机会获得积分奖励哦

稍等,评论加载中...

发送qq消息

关注公众号
扫一扫关注公众号

微信交流请加:tgw750203

在线客服