Viewer.js 图片预览插件使用 - 寒爵-前端开发-郭俊杰的知识库

Viewer.js 图片预览插件使用 - 寒爵

Data: 2016-04-20 08:22:36Form: JournalClick: 6

寒爵

Viewer.js 图片预览插件使用 - 寒爵 - 博客园

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

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

3|22、npm安装

npm install viewerjs

3|33、Html结构

<!-- 单张图片 --> <div> <img id="image" data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="图片1"> </div> <!-- 多张图片 --> <ul id="viewer"> <li><img data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="图片1"></li> <li><img data-original="img/viewer2.jpg" src="img/viewer2.jpg" alt="图片2"></li> <li><img data-original="img/viewer3.jpg" src="img/viewer3.jpg" alt="图片3"></li> <li><img data-original="img/viewer4.jpg" src="img/viewer4.jpg" alt="图片4"></li> <li><img data-original="img/viewer5.jpg" src="img/viewer5.jpg" alt="图片5"></li> <li><img data-original="img/viewer6.jpg" src="img/viewer6.jpg" alt="图片6"></li> </ul>

3|44、JavaScript