zx-image-view图片查看插件-切换、旋转、缩放、移动

zx-image-view

图片预览插件，支持图片切换、旋转、缩放、移动...

浏览器支持：IE10+, (IE9不支持旋转功能)

效果预览：https://capricorncd.github.io...

源码地址：https://github.com/capricornc...

默认键盘操作

方向键：左 left右 right前后图片切换，上 up下 down顺时针逆时针旋转

滚动鼠标：缩放

支持自定义配置，详见页尾

使用 use

浏览器Brower

<div id="imgList"><img data-index="0" src="a.jpg"><img data-index="1" src="b.jpg"><img data-index="2" src="c.jpg"><img data-index="3" src="d.jpg">
</div>
<script src="dist/js/zx-image-view.min.js"></script>
<script>// 初始化参数var options = {// 见参数说明处};// 使用方法1var imgArray1 = ['http://xxx.com/a.jpg','http://xxx.com/b.jpg','http://xxx.com/c.jpg','http://xxx.com/d.jpg'];var ziv1 = new ZxImageView(options, imgArray1);// 点击缩略图，查看大图var $el = document.getElementById('imgList');$el.addEventListener('click', function (e) {if (this.nodeName === 'IMG') {// 获取图片索引var index = this.getAttribute('data-index');// 查看图片ziv1.view(index);}})// 使用方法2var imgArray2 = [{url: 'http://xxx.com/a.jpg',// 初始旋转角度angle: 90},{url: 'http://xxx.com/b.jpg',angle: 0},{url: 'http://xxx.com/c.jpg',angle: 180},{url: 'http://xxx.com/d.jpg'angle: 90}];var ziv2 = new ZxImageView(imgArray2);// 使用方法3var ziv3 = new ZxImageView();ziv3.init(imgArray2);
</script>

npm

npm install zx-image-view --save-dev
# 或
npm i zx-image-view -D

ES6+

import { ZxImageView } from 'zx-image-view'

开发调试

npm run start
# http://localhost:9000/

效果图 preview

参数 options

options.keyboard

注意：参数中只能包含有且一个mousewheel配置；任何配置均不支持组合键。

keyboard参数可选属性见页尾--附录

 // 初始化参数
let _config = {// 分页mouseover切换图片paginationable: true,// 显示关闭按钮showClose: true,// 显示上一张/下一张箭头showSwitchArrow: true,// 显示分页导航栏showPagination: true,// 缩放scalable: true,// 旋转rotatable: true,// 移动movable: true,// 键盘配置keyboard: {prev: 'a',next: 'd',rotate: ['up', 'down'],scale: 'mousewheel'}
}
new ZxImageView(_config);

方法 methods

• destroy() 销毁当前图片查看dom对象
• init(imageArray, index) 初始化图片数据

• update(imageArray) 更新图片数据；与init()基本相同

• view(index, angle, imageArray) 查看第index + 1张图片

附录

支持自定义键盘按钮名/keyboard参数可选属性

Github

https://github.com/capricornc...