viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

首先，让我们来了解一下viewer.js是什么：

viewer.js是一个基于jQuery的图像查看插件，它支持缩放、拖拽、旋转等操作，并且支持多种图片格式。在网站开发过程中，经常需要展示图片，而viewer.js可以为网站加入更加丰富和灵活的图片查看效果，提升网站的用户体验。

下面是针对viewer.js的使用攻略：

1. 安装viewer.js

你可以通过以下方式安装viewer.js：

通过npm安装

npm install viewerjs --save

通过cdn引入

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.2/viewer.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.2/viewer.min.js"></script>

2. 基本使用

HTML结构

<div id="viewer">
  <img src="image.jpg" alt="">
</div>

JS代码

var viewer = new Viewer(document.getElementById('viewer'), {
  //配置项
});

3. 参数配置

viewer.js提供了很多配置项，下面是常用的一些配置：

var viewer = new Viewer(document.getElementById('viewer'), {
  navbar: true, //显示顶部工具栏
  title: true, //显示图片标题
  toolbar: true, //显示底部工具栏
  tooltip: true, //显示缩略图的提示
  movable: true, //开启拖拽模式
  zoomable: true, //开启缩放模式
  rotatable: true, //开启旋转模式
  scalable: true, //开启翻转模式
  transition: true, //开启过渡动画效果
  fullscreen: true, //显示全屏按钮
  keyboard: true, //开启键盘控制
  interval: 5000, //设置自动播放时间间隔
  backdrop: true, //显示黑色背景遮罩
  zIndex: 2015, //设置插件的z-index值
  viewed: function() { //图片查看后触发的回调函数
    console.log('浏览了图片！')
  },
  hide: function() { //插件隐藏后触发的回调函数
    console.log('viewer隐藏了！')
  }
});

4. 示例1

下面是一个基于viewer.js的简单图片展示示例：

HTML结构

<div id="viewer">
  <img src="image1.jpg" data-original="image1.jpg" alt="">
  <img src="image2.jpg" data-original="image2.jpg" alt="">
  <img src="image3.jpg" data-original="image3.jpg" alt="">
</div>

JS代码

var viewer = new Viewer(document.getElementById('viewer'), {
  navbar: false,
  title: false,
  toolbar: true,
  tooltip: true,
  movable: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  transition: true,
  fullscreen: true,
  keyboard: true,
  interval: 5000,
  backdrop: true,
  zIndex: 2015
});

5. 示例2

下面是一个基于viewer.js实现的相册图片展示示例，通过下方的缩略图列表可以查看不同的图片：

HTML结构

<div class="album">
  <div id="viewer">
    <img src="image1.jpg" data-original="image1.jpg" alt="">
    <img src="image2.jpg" data-original="image2.jpg" alt="">
    <img src="image3.jpg" data-original="image3.jpg" alt="">
  </div>
  <div class="thumbnails">
    <img src="image1.jpg" data-original="image1.jpg" alt="">
    <img src="image2.jpg" data-original="image2.jpg" alt="">
    <img src="image3.jpg" data-original="image3.jpg" alt="">
  </div>
</div>

JS代码

var viewer = new Viewer(document.getElementById('viewer'), {
  navbar: false,
  title: false,
  toolbar: true,
  tooltip: true,
  movable: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  transition: true,
  fullscreen: true,
  keyboard: true,
  interval: 5000,
  backdrop: true,
  zIndex: 2015
});

//缩略图点击事件
var thumbnails = document.querySelectorAll('.thumbnails img');
for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function() {
    viewer.view(this);
  });
}

以上就是针对viewer.js的使用攻略和两个示例的说明，希望能对你有所帮助。