当前位置:Gxlcms > JavaScript > 关于zx-image-view图片预览插件,支持旋转、缩放、移动的相关操作

关于zx-image-view图片预览插件,支持旋转、缩放、移动的相关操作

时间:2021-07-01 10:21:17 帮助过:12人阅读

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

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

源码地址:https://github.com/zx1984/image-view

演示地址:https://zx1984.github.io/image-view/dist/

默认键盘操作

方向键:左leftright前后图片切换,上updown顺时针逆时针旋转

滚动鼠标:缩放

注:支持自定义按键配置,详见参数说明。

# 效果图 preview

zx-image-view图片预览插件

zx-image-view图片预览插件

zx-image-view图片预览插件

演示地址:https://zx1984.github.io/image-view/dist/

使用 use

npm

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

ES6+

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

浏览器Brower

<p 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"></p><script src="dist/js/zx-image-view.min.js"></script><script>
  // 初始化参数
  var options = {    // 见参数说明处
  };  // 图片数组1
  var imgArray1 = [    'http://xxx.com/a.jpg',    'http://xxx.com/b.jpg',    'http://xxx.com/c.jpg',    'http://xxx.com/d.jpg'
  ];  // 图片数组2
  var 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
    }
  ];</script>

使用方法 1

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);
  }
})

使用方法 2

var ziv2 = new ZxImageView(imgArray2);

使用方法 3

var ziv3 = new ZxImageView();
ziv3.init(imgArray2);

使用方法 4

var ziv4 = new ZxImageView();// 业务场景,针对后台管理列表页,每条数据(动态)有多张图片,需独立预览,不需要多次实例化ZxImageView// 查看imgArray2第3张图片ziv4.view(2, imgArray2);

开发调试

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

参数 options

参数类型说明
backgroundOpacityFloor背景遮罩(黑色)透明度,取值0-1,默认值0.6
iconfontStringiconfont图标字体css样式url地址(样式名见附录iconfont说明)
keyboardObject键盘按钮(前/后一张、缩放、旋转、关闭)配置
movableBoolean移动图片,默认值true
paginationableBoolean分页mouseover切换图片,默认值true
rotatableBoolean旋转图片,默认值true
scalableBoolean缩放图片,默认值true
showCloseBoolean显示关闭预览窗口按钮,默认值true
showPaginationBoolean显示分页栏,默认值true
showSwitchArrowBoolean显示左右切换箭头按钮,默认值true
showToolbarBoolean显示工具栏,默认值false

options.keyboard

参数类型可选键名说明
closeString关闭图片查看器
nextString任意键下一张
prevString任意键或mousewheel上一张;为mousewheel时,next无效
rotateString或Array任意键或mousewheel图片旋转
scaleString或Array任意键或mousewheel图片缩放

注意:参数中只能包含有且一个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) 初始化图片数据

参数类型必须说明
imageArrayArray图片url数组
indexNumberimageArray的索引,默认显示的第index + 1张图片;默认为0; 如果index > imageArray.length将被忽略

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

参数类型必须说明
indexNumberimageArray的索引,显示的第index + 1张图片
angleNumber图片旋转角度,90的整数倍
imageArrayArray图片url数组,将更新初始化的图片数组

附录

  • iconfont样式名说明

字体样式.zx,图标样式如下图:

zx-image-view iconfont

http://www.iconfont.cn/

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

属性键名/说明
escapeEsc键
主键盘
backquote~
digit11(!)
digit22(@)
digit33(#)
digit44($)
digit55(%)
digit66(^)
digit77(&)
digit88(*)
digit99(()
digit00())
equal=(+)
minus-(-)
a-zAZ
bracketLeft[({)
bracketRight](})
semicolon;(:)
quote'(")
backslash反斜线
period,(>)
comma.(<)
slash/(?)
space空格键
数字键盘
numpad00
numpad11
numpad22
numpad33
numpad44
numpad55
numpad66
numpad77
numpad88
numpad99
numpadpide/分或除
numpadMultiply*
numpadSubtract-
numpadAdd+
numpadDecimal.小数点
编辑键区
insertInsert 键
homeHome 键
endEnd 键
pageUpPageUp 键
pageDownPageDown
deleteDelete 键
left方向键左(ArrowLeft)
right方向键右(ArrowRight)
up方向键上(ArrowUp)
down方向键下(ArrowDown)
鼠标滚动说明
mousewheel鼠标滚动键

以上就是关于zx-image-view图片预览插件,支持旋转、缩放、移动的相关操作的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行