zx-image-view
Version:
Image view plugin
126 lines (123 loc) • 3.51 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-view 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;
}
</style>
</head>
<body>
<div id="imgs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<script src="js/zx-image-view.min.js"></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']
}
}
// 使用方法
var ziv = new ZxImageView(_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>