viewjs简介：
Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择。Viewer.js 有以下特点：
支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本，您可以任意选择。
1.使用缩略图-原始图的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Viewer.js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="../css/viewer.css">
<style>
.pictures {
list-style: none;
margin: 0;
max-width: 30rem;
padding: 0;
}
.pictures > li {
border: 1px solid transparent;
float: left;
height: calc(100% / 3);
margin: 0 -1px -1px 0;
overflow: hidden;
width: calc(100% / 3);
}
.pictures > li > img {
cursor: zoom-in;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Viewer with custom title</h1>
<div id="galley">
<ul class="pictures">
<li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
<li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
<li><img data-original="../images/tibet-3.jpg" src="../images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
<li><img data-original="../images/tibet-4.jpg" src="../images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
<li><img data-original="../images/tibet-5.jpg" src="../images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="../images/tibet-6.jpg" src="../images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="../images/tibet-7.jpg" src="../images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="../images/tibet-8.jpg" src="../images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="../images/tibet-9.jpg" src="../images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="../js/viewer.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var galley = document.getElementById('galley');
var viewer = new Viewer(galley, {
url: 'data-original',
title: function (image) {
return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
},
});
});
</script>
</body>
</html>
2.只用一张图，主要目的是为了放大缩小图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Viewer.js</title>
<link rel="stylesheet" href="../css/viewer.css">
<style>
.pictures {
list-style: none;
margin: 0;
max-width: 30rem;
padding: 0;
}
.pictures > li {
border: 1px solid transparent;
float: left;
height: calc(100% / 3);
margin: 0 -1px -1px 0;
overflow: hidden;
width: calc(100% / 3);
}
.pictures > li > img {
cursor: zoom-in;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Viewer with custom title</h1>
<div id="galley">
<ul class="pictures">
<li><img src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
<li><img src="../images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
<li><img src="../images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
<li><img src="../images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
<li><img src="../images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img src="../images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img src="../images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img src="../images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img src="../images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>
</div>
</div>
<script src="../js/viewer.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var galley = document.getElementById('galley');
var viewer = new Viewer(galley, {
url: 'src'
});
});
</script>
</body>
</html>
3. js下载地址
GitHub 地址：
4. 使用效果
注意：本文归作者所有，未经作者允许，不得转载
