本文主要是介绍zx-image-viewer图片预览插件,支持旋转、缩放、移动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
图片预览插件,支持图片切换、旋转、缩放、移动…
浏览器支持:IE10+, (IE9不支持旋转功能)
源码地址:https://github.com/capricorncd/zx-image-viewer
演示地址:https://capricorncd.github.io/zx-image-viewer/dist/
默认键盘操作
方向键:左
left
右right
前后图片切换,上up
下down
顺时针逆时针旋转
滚动鼠标:缩放
注:支持自定义按键配置,详见参数说明。
# 效果图 preview
演示地址:https://capricorncd.github.io/zx-image-viewer/dist/
使用 use
npm
npm install zx-image-viewer --save-dev
# 或
npm i zx-image-viewer -D
ES6+
import { ZxImageViewer } from 'zx-image-viewer'
浏览器Browser
<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
这篇关于zx-image-viewer图片预览插件,支持旋转、缩放、移动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!