内容介绍
前端开发过程中经常会有图片列表的需求，如后台系统审核用户上传的照片等，小伙伴们想要实现图片放大、切换、拖动等预览效果，自己封装费时费力，而且需要考虑切换动画等细节。今天推荐一个相册图片预览的插件——viewer.js（插件分jquery和js两种，之前项目中使用jquery版本出现一些问题，具体情况不做说明，以下为js版本）
支持功能：
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转（类似微博的图片旋转）
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式（可做屏保）
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
效果演示
https://liujianwei695.gitee.io/onlineeffect/example.html
viewer.min.js资源
资源地址：https://download.csdn.net/download/cainiaoyihao_/16492445
jquery.pagination.js资源
资源地址：https://download.csdn.net/download/cainiaoyihao_/16485958
一、使用方法
// 图片预览
var viewer = new Viewer(document.getElementById('viewer'), {
// url: 'data-original',
button: true,
inline: false,
zoomable: false,
// minZoomRatio: 0.1,
// maxZoomRatio: 10,
// backdrop: true,
movable: true,
interval: 2000,
navbar: true,
loading: true,
show: function() {
viewer.update();
}
});
二、常用参数
| 参数 | 说明 |
|---|---|
| inline | 启用 inline 模式 |
| button | 显示右上角关闭按钮（jQuery 版本无效） |
| navbar | 显示缩略图导航 |
| title | 显示当前图片的标题（现实 alt 属性及图片尺寸） |
| toolbar | 显示工具栏 |
| tooltip | 显示缩放百分比 |
| movable | 图片是否可移动 |
| zoomable | 图片是否可缩放 |
| rotatable | 图片是否可旋转 |
| scalable | 图片是否可翻转 |
| transition | 使用 CSS3 过度 |
| fullscreen | 播放时是否全屏 |
| keyboard | 是否支持键盘 |
| interval | 播放间隔，单位为毫秒 |
| zoomRatio | 鼠标滚动时的缩放比例 |
| minZoomRatio | 最小缩放比例 |
| maxZoomRatio | 最大缩放比例 |
| zIndex | 设置图片查看器 modal 模式时的 z-index |
| zIndexInline | 设置图片查看器 inline 模式时的 z-index |
| url | 设置大图片的 url |
| build,built,show,shown,hide,hidden,view,viewed | 回调函数 |
三、点击图片外的背景，隐藏预览图片
通过检查元素获取需要的元素类名，阻止事件冒泡；
// 点击图片外的背景，隐藏预览图片
$("body").on("click", ".viewer-container", function(e) {
viewer.hide()
});
$("body").on("click", ".viewer-canvas", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-footer", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-button", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-tooltip", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-player", function(e) {
e.stopPropagation();
});
四、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mockjs，viewerjs，pagination示例</title>
<link rel="stylesheet" href="/css/reset.css">
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/source/pagination/pagination.css">
<script src="/source/pagination/jquery.pagination.js"></script>
<link rel="stylesheet" href="/source/viewer/viewer.min.css">
<script src="/source/viewer/viewer.min.js"></script>
<style>
.flexBox {
display: flex;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: -ms-flex;
}
.cons {
width: 80vw;
height: 60vh;
margin: 0 auto;
border: 1px solid #999;
}
.photoLists {
padding-top: 4vh;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.photoList {
width: 39vw;
margin-bottom: 2vh;
display: table-cell;
text-align: center;
}
.photoList img {
width: 30vw;
height: 25vh;
}
</style>
</head>
<body>
<div class="cons" id="viewer">
<ul class="photoLists flexBox">
</ul>
</div>
<ul id="filterTab" class="flexBox"></ul>
<script>
var allPages = 5,
allNums = 20,
showNum = 4;
Mock.mock('https://api.com', {
"code": "200",
"status": "1",
"message": "success",
"allnum": allNums,
"totalpage": allPages,
"data": {
"photoList|4": [{
'id|+1': 1,
'name': '@cname',
'age|1-100': 100,
'gender|1': ['男', '女'],
'birthday': '@date("yyyy-MM-dd")', //日期
'time': '@time("HH:mm:ss")',
'boolean|1': true,
'image|1': ["http://dummyimage.com/500x300/894FC4/FFF.png&text=qwerty", "http://dummyimage.com/500x300/894FC4/FFF.png&text=123", "http://dummyimage.com/500x300/894FC4/FFF.png&text=uiopas", "http://dummyimage.com/500x300/894FC4/FFF.png&text=456", "http://dummyimage.com/500x300/894FC4/FFF.png&text=dfghjk", "http://dummyimage.com/500x300/894FC4/FFF.png&text=789", "http://dummyimage.com/500x300/894FC4/FFF.png&text=cvblzx", "http://dummyimage.com/500x300/894FC4/FFF.png&text=987", "http://dummyimage.com/500x300/894FC4/FFF.png&text=qwenmq", "http://dummyimage.com/500x300/894FC4/FFF.png&text=7654", ]
}]
}
});
function init(currentPage = 1) {
$.ajax({
type: "post",
url: "https://api.com",
data: {
page: currentPage
},
dataType: "json",
success: function(res) {
if (currentPage == 1) {
example(allNums)
}
var result = res.data.photoList,
showStr = "";
// console.log(res, result);
$.each(result, function(index, value) {
showStr += '<li class="photoList"><img src="'%20+ value.image + '" alt="test-photo"></li>'
});
$(".photoLists").html(showStr)
},
complete: function() {
// 图片预览
var viewer = new Viewer(document.getElementById('viewer'), {
// url: 'data-original',
button: true,
inline: false,
zoomable: true,
fullscreen: false,
transition: true,
minZoomRatio: 0.1,
maxZoomRatio: 10,
// backdrop: true,
movable: true,
interval: 2000,
navbar: true,
loading: true,
show: function() {
viewer.update();
}
});
// 点击图片外的背景，隐藏预览图片
$("body").on("click", ".viewer-container", function(e) {
viewer.hide()
});
$("body").on("click", ".viewer-canvas", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-footer", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-button", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-tooltip", function(e) {
e.stopPropagation();
});
$("body").on("click", ".viewer-player", function(e) {
e.stopPropagation();
});
}
});
}
init();
// 分页
function example(page, current = 1) {
$('#filterTab').pagination({
totalData: page,
showData: showNum,
coping: true,
jump: true,
current: current,
callback: function(api) {
init(api.getCurrent())
}
});
};
</script>
<script>
console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
</script>
</div>
</body>
</html>
标签：javascript，viewer.js，工具类，照片预览，图片查看器
更多演示案例，查看 案例演示
欢迎评论留言!
版权声明：本文为cainiaoyihao_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。