關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作

圖片預覽插件，支援圖片切換、旋轉、縮放、移動…

瀏覽器支援：IE10 , (IE9不支援旋轉功能)

源碼位址：https://github .com/zx1984/image-view

示範網址：https://zx1984.github.io/image-view/dist/

預設鍵盤動作

方向鍵：左left右right前後圖片切換，上方up下down順時針逆時針旋轉

捲動滑鼠：縮放

註：支援自訂按鍵配置，詳見參數說明。

# 效果圖preview

示範網址：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  src="/static/imghw/default1.png"  data-src="a.jpg"  class="lazy"  data-index="0"  alt="關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作" >
  <img  src="/static/imghw/default1.png"  data-src="b.jpg"  class="lazy"  data-index="1"  alt="關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作" >
  <img  src="/static/imghw/default1.png"  data-src="c.jpg"  class="lazy"  data-index="2"  alt="關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作" >
  <img  src="/static/imghw/default1.png"  data-src="d.jpg"  class="lazy"  data-index="3"  alt="關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作" ></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>

使用方法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

# #backgroundOpacity0-10.6iconfont圖示字體css樣式url位址(樣式名稱見附錄iconfont說明)# Boolean

參數	型別
Floor	背景遮罩(黑色)透明度，取值	，預設值
	iconfont	String
	keyboard	Object鍵盤按鈕(前/後一張、縮放、旋轉、關閉)配置
movable	Boolean	移動圖片，預設值true
paginationable	Boolean	分頁mouseover切換圖片，預設值true
rotatable	Boolean	旋轉圖片，預設值true
scalable	Boolean	縮放圖片，預設值true
showClose

顯示關閉預覽視窗按鈕，預設值

true#showPaginationBoolean顯示分頁欄，預設值showSwitchArrow#Boolean顯示左右切換箭頭按鈕，預設值showToolbarfalseoptions.keyboardnextString下一張##prev

			true
		true
Boolean	#顯示工具列，預設值
		參數	#可選鍵名稱說明
	close	String#關閉圖片檢視器
		任意鍵

# String######任意鍵或###mousewheel#########上一張；當上一張###mousewheel###時，next無效########### #rotate######String或Array######任意鍵或###mousewheel#########圖片旋轉############scale## ####String或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) 初始化图片数据

参数	类型	必须	说明
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数组，将更新初始化的图片数组

附錄

• iconfont樣式名稱說明

#字體樣式.zx，圖示樣式如下圖：

http://www.iconfont.cn/

• #支援自訂鍵盤按鈕名稱/keyboard參數選用屬性

#鍵名稱/說明Esc鍵~ 鍵1(!) 鍵2(@) 鍵3(#) 鍵4($) 鍵 鍵digit6 鍵digit7 鍵digit8 鍵digit9 鍵digit0 鍵equal 鍵minus 鍵a-z鍵bracketLeft 鍵bracketRight 鍵semicolon 鍵quote 鍵#backslash 鍵period,(>) 鍵.( 鍵slash#/(?)numpad00numpad11#numpad22numpad33numpad44numpad5#5numpad6#numpad78##numpadpidenumpadMultiply##*numpadSubtract-#numpadAdd加上.#編輯鍵區insert

屬性
	escape
	主鍵盤
	#backquote
	digit1
	digit2
	digit3
	digit4
	digit5##5( %)
	6(^)
	7(&)
	8(*)
	9(()
	0( ))
	#=( )
	-(-)
	A至Z
	[({)
	#](})
	#;(:)
	'(")
	反斜線
	comma
	鍵
space	空白鍵
數字鍵盤
	6
##7	numpad8
	numpad99
	#/分或除
	乘以
	減
	#numpadDecimal
小數點

Insert 鍵homeHome 鍵endEnd 鍵pageUp

PageUp 鍵

######pageDown######PageDown## ##########delete######Delete 鍵#############left######方向鍵左(ArrowLeft)############################################################### ######right######方向鍵右(ArrowRight)#############up######方向鍵上(ArrowUp)###### ######down######方向鍵下(ArrowDown)#########################滑鼠捲動##### #說明##################mousewheel#######滑鼠捲動鍵############################################################################################################### #

以上是關於zx-image-view圖片預覽插件，支援旋轉、縮放、移動的相關操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！