强大的jQuery图片查看器插件Viewer.js

标签：load   图片查看   事件   默认   演示   导航   index   jpg   类型   

简介

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

Viewer.js 有以下特点：

• 支持移动设备触摸事件


• 支持响应式


• 支持放大/缩小


• 支持旋转（类似微博的图片旋转）


• 支持水平/垂直翻转


• 支持图片移动


• 支持键盘


• 支持全屏幻灯片模式（可做屏保）


• 支持缩略图


• 支持标题显示


• 支持多种自定义事件

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

在线演示及下载

在线演示：http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Viewer.js/

下载页面

使用方法

引入文件
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();

配置

强大的jQuery图片查看器插件Viewer.js

标签：load   图片查看   事件   默认   演示   导航   index   jpg   类型   

原文地址：https://www.cnblogs.com/lalalagq/p/9973509.html