Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations.

Image preview plug-in, supports image switching, rotation, scaling, moving...

Browser support: IE10, (IE9 does not support rotation function)

Source code address: https://github .com/zx1984/image-view

Demo address: https://zx1984.github.io/image-view/dist/

Default keyboard operation

Direction keys: leftleftrightrightswitch the front and back pictures, upupdowndownrotate clockwise and counterclockwise

Rolling mouse: zoom

Note: Supports custom button configuration, see parameter description for details.

# Rendering preview

##Demo address: https:// zx1984.github.io/image-view/dist/

Use use

npm

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

ES6

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

BrowserBrower

<p id="imgList">
  <img  data-index="0" src="a.jpg" alt="Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations." >
  <img  data-index="1" src="b.jpg" alt="Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations." >
  <img  data-index="2" src="c.jpg" alt="Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations." >
  <img  data-index="3" src="d.jpg" alt="Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations." ></p><script src="dist/js/zx-image-view.min.js"></script><script>
  // 初始化参数
  var options = {    // 见参数说明处
  };  // 图片数组1
  var imgArray1 = [    &#39;http://xxx.com/a.jpg&#39;,    &#39;http://xxx.com/b.jpg&#39;,    &#39;http://xxx.com/c.jpg&#39;,    &#39;http://xxx.com/d.jpg&#39;
  ];  // 图片数组2
  var imgArray2 = [
    {
      url: &#39;http://xxx.com/a.jpg&#39;,      // 初始化旋转角度
      angle: 90
    },
    {
      url: &#39;http://xxx.com/b.jpg&#39;,
      angle: 0
    },
    {
      url: &#39;http://xxx.com/c.jpg&#39;,
      angle: 180
    },
    {
      url: &#39;http://xxx.com/d.jpg&#39;
      angle: 90
    }
  ];</script>

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

Using method 2

var ziv2 = new ZxImageView(imgArray2);

Using method 3

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

Using method 4

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

Development and debugging

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

Parameter options

ParameterTypeDescriptionbackgroundOpacityFloorBackground mask (black) transparency, value iconfontStringiconfont icon font css style url address (see the appendix iconfont description for the style name)keyboardObjectKeyboard button (previous/next, zoom, rotate, close) configurationmovableBooleanMove pictures, default valuepaginationableBooleanPagination mouseover switches pictures, default valuerotatableBooleanRotate the image, default valuescalableBooleanScale the image, default valueshowClose BooleanShow close preview window button, default valueshowPaginationBooleanShow pagination column, default valueshowSwitchArrowBooleanDisplay left and right switching arrow buttons, default valueshowToolbarBooleanShow toolbar, default value

		0-1, default value 0.6
		true
		true
		true
		true
		true
		true
		true
		false

options.keyboard

ParametersTypeOptional key nameDescriptioncloseStringClose image viewernextStringAny keyNextprev StringAny key or previous; when it is rotateString or ArrayAny key or Picture rotationscaleString or ArrayAny key or Picture zoom

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

		mousewheel	mousewheel, next is invalid
		mousewheel
		mousewheel

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

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

参数	类型	必须	说明
index	Number	是	imageArray的索引，显示的第index + 1张图片
angle	Number	否	图片旋转角度，90的整数倍
imageArray	Array	否	图片url数组，将更新初始化的图片数组

Appendix

• iconfont style name description

Font style.zx, icon style is as shown below:

http://www.iconfont.cn/

• Support custom keyboard button name/keyboard parameter optional attributes

##backquotedigit1digit2digit3digit4digit5##5( %)digit66(^)digit77(&)digit88(*)digit99(()digit00( ))equal=( )minus-(-)a-zAbracketLeft[({)##bracketRight Key;(:)'(")backslash,(>).( key/(?)Space bar0123456789/*-.Insert keyHome keyEnd KeyPageUp KeyPageDownDelete keyArrowLeftArrowRightArrowUpDown arrow key(ArrowDown)##Mouse scroll

Attributes	Key name/Description
escape	Esc key
Main keyboard
	~ Key
	1(!) Key
	2(@) key
	3(#) key
	4($) key
	key
	key
	key
	key
	key
	key
	key
	Key
	to ZKey
	key
](})	##semicolon
Key	quote
key	backslash
key	period
key	comma
slash
key	space
	Number pad
	numpad0
	numpad1
	numpad2
	numpad3
	numpad4
	numpad5
	numpad6
	numpad7
	numpad8
	numpad9
	numpadpide
divide or divide	numpadMultiply
multiply	numpadSubtract
Subtract	numpadAdd
Add	numpadDecimal
Decimal point	Edit keypad
	insert
	home
	end
	pageUp
	pageDown
	delete
	left
	right
	up
	down

DescriptionmousewheelMouse scroll key

The above is the detailed content of Regarding the zx-image-view image preview plug-in, it supports rotation, scaling, and moving related operations.. For more information, please follow other related articles on the PHP Chinese website!