zx-image-viewer
Version:
168 lines (164 loc) • 5.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>zx-image-viewer capricorncd</title>
<style>
#imgs .item {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #f1f1f1;
margin: 5px;
cursor: pointer;
}
#imgs .item img {
width: 100%;
height: auto;
}
header {
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #24292e;
}
header h1 {
color: #fff;
line-height: 60px;
margin: 0 0 0 20px;
font-weight: 500;
font-size: 24px;
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
header a {
display: inline-block;
position: absolute;
right: 20px;
top: 50%;
margin-top: -12px;
font-size: 0;
opacity: 0.6;
}
header a:hover {
opacity: 0.8;
}
header svg {
fill: currentColor;
color: #fff;
}
body {
padding-top: 60px;
}
</style>
</head>
<body>
<header>
<h1>zx-image-viewer</h1>
<a href="https://github.com/capricorncd/zx-image-viewer" target="_blank"><svg height="24" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
</header>
<div id="imgs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<script src="<%= htmlWebpackPlugin.files.chunks['zx-image-viewer'].entry %>"></script>
<script>
// 随机生成90倍数的旋转角度
function randAngle () {
return 90 * (Math.floor(Math.random() * 100) % 4);
}
// 模拟数据，图片数组1
var imgs = [
'https://photo.tuchong.com/1000000/f/22405378.jpg',
'https://photo.tuchong.com/1000000/f/22405389.jpg',
'https://photo.tuchong.com/1000000/f/22405385.jpg',
'https://photo.tuchong.com/1000000/f/22405381.jpg',
'https://photo.tuchong.com/1000000/f/22405379.jpg',
'https://photo.tuchong.com/1000000/f/22405393.jpg',
'https://photo.tuchong.com/1000000/f/22405388.jpg',
'https://photo.tuchong.com/1000000/f/22396595.jpg',
'https://photo.tuchong.com/1000000/f/22396592.jpg',
'https://photo.tuchong.com/1000000/f/22396593.jpg',
'https://photo.tuchong.com/1000000/f/22396589.jpg',
'https://photo.tuchong.com/1000000/f/22396594.jpg',
'https://photo.tuchong.com/1000000/f/22396590.jpg',
'https://photo.tuchong.com/1000000/f/22396591.jpg'
]
// 图片数组2
var imgs2 = []
// 获取图片列表容器
var $el = document.getElementById('imgs');
var html = '';
// 创建img dom
imgs.forEach(function (src) {
var angle = randAngle()
// 拼接html结构
html += '<div class="item" data-angle="' + angle + '"><img src="'+ src +'" style="transform:rotate('+ angle +'deg)"></div>';
// 生成imgs2数组
imgs2.push({
url: src,
angle: angle
})
})
// 将图片添加至图片容器中
$el.innerHTML = html;
/**
* 插件使用 *****************************************************************************
*/
// 初始化参数
var _config = {
// 分页mouseover切换图片
paginationable: true,
// 显示关闭按钮
showClose: true,
// 显示上一张/下一张箭头
showSwitchArrow: true,
// 显示分页导航栏
showPagination: true,
// 显示工具栏
showToolbar: true,
// 缩放
scalable: true,
// 旋转
rotatable: true,
// 移动
movable: true,
// 键盘配置
keyboard: {
// scale: ['equal', 'minus']
},
// maskBackground: 'rgba(255, 100, 0, 0.5)'
}
// 使用方法
var ziv = new ZxImageViewer(_config, imgs2);
console.log(ziv);
// 查看第几张
var $images = $el.querySelectorAll('.item');
for (var i = 0; i < $images.length; i++) {
(function (index) {
$images[i].addEventListener('click', function () {
ziv.view(index);
})
}(i))
}
// $images.forEach(function (item, index) {
// item.addEventListener('click', function () {
// ziv.view(index);
// })
// })
ziv.on('show', function () {
console.log('show')
})
ziv.on('close', function () {
console.log('close')
})
</script>
</body>
</html>