图片查看器 Viewer.js

妖狐艹你老母 2023-06-08 06:08 1阅读 0赞

### 插件简介 ###

Viewer.js 是一款强大的图片查看器，提供了纯 JS 版本和 jQuery 版本，具有以下特点：

1.  支持移动设备触摸事件
2.  支持响应式
3.  支持放大、缩小
4.  支持旋转（类似微博的图片旋转）
5.  支持水平、垂直翻转
6.  支持图片移动
7.  支持键盘
8.  支持全屏幻灯片模式（可做屏保）
9.  支持缩略图
10. 支持标题显示
11. 支持多种自定义事件

官网地址：[http://fengyuanchen.github.io/viewerjs/][http_fengyuanchen.github.io_viewerjs]

详细说明：[http://www.dowebok.com/192.html][http_www.dowebok.com_192.html]

### 使用步骤 ###

1、下载并引入资源文件

GitHub 下载（JS 版本）：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewerjs]

GitHub 下载（jQuery 版本）：[https://github.com/fengyuanchen/viewer][https_github.com_fengyuanchen_viewer]

注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用，请正确下载需要的版本。

JS 版本引入：

jQuery 版本引入：

2、Html 页面代码

3、JavaScript 代码

JS 版本：

var viewer = new Viewer(document.getElementById('dowebok'));
    //new Viewer(element[,options])

jQuery 版本：

$('#dowebok').viewer();
    /$().viewer([options])

### options 参数配置 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2][]

### toolbar Object 类型详解 ###

\{ key: Number|Boolean \}：显示或隐藏对应 key 的按钮，为 Number 的时候为可见性

\{ key: String \}：自定义按钮的大小

\{ key: Function \}：自定义按钮点击的处理

\{ key: \{ show: Boolean|Number, size: String, click: Function \} \}：自定义按钮的每个属性

size 的取值范围：small、medium、default、large  
key 值列表说明：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3][]

###  浏览器兼容 ###

![20191016174118578.jpg][]

### 预览效果（双击图片即可出来） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4][]

[http_fengyuanchen.github.io_viewerjs]: http://fengyuanchen.github.io/viewerjs/
[http_www.dowebok.com_192.html]: http://www.dowebok.com/192.html
[https_github.com_fengyuanchen_viewerjs]: https://github.com/fengyuanchen/viewerjs
[https_github.com_fengyuanchen_viewer]: https://github.com/fengyuanchen/viewer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: /images/20230531/365bb0d3235a495390f93c8c31bdbd06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/3c90edfb0a87425281f358a635e5fb42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/a251d213539f478dac13d45b03f7a81e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/917c290da2af42778519c0f571ba4898.png
[20191016174118578.jpg]: /images/20230531/be34074e686246d884104753857a2d3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4]: /images/20230531/1eaf4415427045e39188af330a4e77a8.png