Viewer.js 图片预览插件

本是古典何须时尚 2022-09-04 06:57 442阅读 0赞

## **一、简介** ##

Viewer.js 是一款强大的图片查看器。

Viewer.js 有以下特点：

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

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

## **二、下载** ##

纯JS版本：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewerjs]

jQuery 版本：[https://github.com/fengyuanchen/jquery-viewer][https_github.com_fengyuanchen_jquery-viewer]

## **三、使用方法** ##

### **直接引入文件** ###

Javascript版：

jQuery版：

### **npm安装** ###

npm install viewerjs

### **Html结构** ###

<ul id="viewer">

### **JavaScript** ###

Javascript版：

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' \});

## **四、配置** ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>inline</td> 
   <td>布尔值</td> 
   <td>false</td> 
   <td>启用 inline 模式</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>显示右上角关闭按钮(jQuery 版本无效)</td> 
  </tr> 
  <tr> 
   <td>navbar</td> 
   <td>布尔值/整型</td> 
   <td>true</td> 
   <td>显示缩略图导航</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>布尔值/整型</td> 
   <td>true</td> 
   <td>显示当前图片的标题(现实 alt 属性及图片尺寸)</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>布尔值/整型</td> 
   <td>true</td> 
   <td>显示工具栏</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>显示缩放百分比</td> 
  </tr> 
  <tr> 
   <td>movable</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>图片是否可移动</td> 
  </tr> 
  <tr> 
   <td>zoomable</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>图片是否可缩放</td> 
  </tr> 
  <tr> 
   <td>rotatable</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>图片是否可旋转</td> 
  </tr> 
  <tr> 
   <td>scalable</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>图片是否可翻转</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>使用 CSS3 过度</td> 
  </tr> 
  <tr> 
   <td>fullscreen</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>播放时是否全屏</td> 
  </tr> 
  <tr> 
   <td>keyboard</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>是否支持键盘</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>整型</td> 
   <td>5000</td> 
   <td>播放间隔，单位为毫秒</td> 
  </tr> 
  <tr> 
   <td>zoomRatio</td> 
   <td>浮点型</td> 
   <td>0.1</td> 
   <td>鼠标滚动时的缩放比例</td> 
  </tr> 
  <tr> 
   <td>minZoomRatio</td> 
   <td>浮点型</td> 
   <td>0.01</td> 
   <td>最小缩放比例</td> 
  </tr> 
  <tr> 
   <td>maxZoomRatio</td> 
   <td>数字</td> 
   <td>100</td> 
   <td>最大缩放比例</td> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td>数字</td> 
   <td>2015</td> 
   <td>设置图片查看器 modal 模式时的 z-index</td> 
  </tr> 
  <tr> 
   <td>zIndexInline</td> 
   <td>数字</td> 
   <td>0</td> 
   <td>设置图片查看器 inline 模式时的 z-index</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>字符串/函数</td> 
   <td>src</td> 
   <td>设置大图片的 url</td> 
  </tr> 
  <tr> 
   <td>build</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>built</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>shown</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>view</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
  <tr> 
   <td>viewed</td> 
   <td>函数</td> 
   <td>null</td> 
   <td>回调函数，具体查看演示</td> 
  </tr> 
 </tbody> 
</table>

[https_github.com_fengyuanchen_viewerjs]: https://github.com/fengyuanchen/viewerjs
[https_github.com_fengyuanchen_jquery-viewer]: https://github.com/fengyuanchen/jquery-viewer