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

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

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

##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

Copy after login

ES6

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

Copy after login

BrowserBrower

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

Copy after login

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

Copy after login

Using method 2

var ziv2 = new ZxImageView(imgArray2);

Copy after login

Using method 3

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

Copy after login

Using method 4

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

Copy after login

Development and debugging

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

Copy after login

Parameter options

Parameter Type Description backgroundOpacity Floor Background mask (black) transparency, value iconfont String iconfont icon font css style url address (see the appendix iconfont description for the style name) keyboard Object Keyboard button (previous/next, zoom, rotate, close) configuration movable Boolean Move pictures, default value paginationable Boolean Pagination mouseover switches pictures, default value rotatable Boolean Rotate the image, default value scalable Boolean Scale the image, default value showClose Boolean Show close preview window button, default value showPagination Boolean Show pagination column, default value showSwitchArrow Boolean Display left and right switching arrow buttons, default value showToolbar Boolean Show toolbar, default value


		0-1`, default value`0.6


		true
		true
		true
		true
		true
		true
		true
		false

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

Copy after login

方法 methods

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

Parameters Type Optional key name Description close String Close image viewer next String Any key Next prev String Any key or previous; when it is rotate String or Array Any key or Picture rotation scale String or Array Any key or Picture zoom




		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:

zx-image-view iconfont

http://www.iconfont.cn/

Support custom keyboard button name/keyboard parameter optional attributes

##backquote digit1 digit2 digit3 digit4 digit5 ##5( %) digit6 6(^) digit7 7(&) digit8 8(*) digit9 9(() digit0 0( )) equal =( ) minus -(-) a-z A bracketLeft [({) ##bracketRight Key ;(:) '(") backslash ,(>) .( key /(?) Space bar 0 1 2 3 4 5 6 7 8 9 / * - . Insert key Home key End Key PageUp Key PageDown Delete key ArrowLeft ArrowRight ArrowUp Down 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`Z`Key
	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

Description mousewheel Mouse 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!