zx-image-view圖片查看插件-切換、旋轉、縮放、移動

zx-image-view

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

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

效果預覽：https://capricorncd.github.io...

源碼地址：https://github.com/capricornc...

默認鍵盤操做

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

滾動鼠標：縮放

支持自定義配置，詳見頁尾

使用 use

瀏覽器Brower

<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 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'
  ];
  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 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
    }
  ];
  var ziv2 = new ZxImageView(imgArray2);

  // 使用方法3
  var ziv3 = new ZxImageView();
  ziv3.init(imgArray2);
</script>

npm

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

ES6+

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

開發調試

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

效果圖 preview

參數 options

參數	類型	說明
backgroundOpacity	Floor	背景遮罩(黑色)透明度，取值0-1，默認值0.6
keyboard	Object	鍵盤按鈕(前/後一張、縮放、旋轉、關閉)配置
paginationable	Boolean	分頁mouseover切換圖片，默認值true
movable	Boolean	移動圖片，默認值true
rotatable	Boolean	旋轉圖片，默認值true
scalable	Boolean	縮放圖片，默認值true
showClose	Boolean	顯示關閉預覽窗口按鈕，默認值true
showPagination	Boolean	顯示分頁欄，默認值true
showSwitchArrow	Boolean	顯示左右切換箭頭按鈕，默認值true

options.keyboard

參數	類型	可選鍵名	說明
prev	String	任意鍵或mousewheel	上一張；爲mousewheel時，next無效
next	String	任意鍵	下一張
scale	String或Array	任意鍵或mousewheel	圖片縮放
rotate	String或Array	任意鍵或mousewheel	圖片旋轉
close	String	關閉圖片查看器

注意：參數中只能包含有且一個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將被忽略

• update(imageArray) 更新圖片數據；與init()基本相同

參數	類型	必須	說明
imageArray	Array	是	圖片url數組

• view(index, angle, imageArray) 查看第index + 1張圖片

參數	類型	必須	說明
index	Number	是	imageArray的索引，顯示的第index + 1張圖片
angle	Number	否	圖片旋轉角度，90的整數倍
imageArray	Array	否	圖片url數組，將更新初始化的圖片數組

附錄

支持自定義鍵盤按鈕名/keyboard參數可選屬性

屬性	鍵名/說明
escape	Esc鍵
主鍵盤
backquote	~ 鍵
digit1	1(!) 鍵
digit2	2(@) 鍵
digit3	3(#) 鍵
digit4	4($) 鍵
digit5	5(%) 鍵
digit6	6(^) 鍵
digit7	7(&) 鍵
digit8	8(*) 鍵
digit9	9(() 鍵
digit0	0()) 鍵
equal	=(+) 鍵
minus	-(-) 鍵
a-z	A至Z鍵
bracketLeft	[({) 鍵
bracketRight	](}) 鍵
semicolon	;(:) 鍵
quote	'(") 鍵
backslash	反斜線 鍵
period	,(>) 鍵
comma	.(<) 鍵
slash	/(?) 鍵
space	空格鍵
數字鍵盤
numpad0	0
numpad1	1
numpad2	2
numpad3	3
numpad4	4
numpad5	5
numpad6	6
numpad7	7
numpad8	8
numpad9	9
numpadDivide	/分或除
numpadMultiply	*乘
numpadSubtract	-減
numpadAdd	+加
numpadDecimal	.小數點
編輯鍵區
insert	Insert 鍵
home	Home 鍵
end	End 鍵
pageUp	PageUp 鍵
pageDown	PageDown
delete	Delete 鍵
left	方向鍵左(ArrowLeft)
right	方向鍵右(ArrowRight)
up	方向鍵上(ArrowUp)
down	方向鍵下(ArrowDown)

鼠標滾動	說明
mousewheel	鼠標滾動鍵

Github

https://github.com/capricornc...