首頁 > web前端 > js教程 > 關於zx-image-view圖片預覽插件,支援旋轉、縮放、移動的相關操作

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

jacklove
發布: 2018-06-11 17:58:50
原創
3826 人瀏覽過

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

瀏覽器支援: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" alt="關於zx-image-view圖片預覽插件,支援旋轉、縮放、移動的相關操作" >
  <img  data-index="1" src="b.jpg" alt="關於zx-image-view圖片預覽插件,支援旋轉、縮放、移動的相關操作" >
  <img  data-index="2" src="c.jpg" alt="關於zx-image-view圖片預覽插件,支援旋轉、縮放、移動的相關操作" >
  <img  data-index="3" src="d.jpg" 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(&#39;imgList&#39;);
$el.addEventListener(&#39;click&#39;, function (e) {
  if (this.nodeName === &#39;IMG&#39;) {    // 获取图片索引
    var index = this.getAttribute(&#39;data-index&#39;);    // 查看图片
    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背景遮罩(黑色)透明度,取值,預設值
iconfontString
keyboardObject鍵盤按鈕(前/後一張、縮放、旋轉、關閉)配置
movableBoolean 移動圖片,預設值true
paginationableBoolean分頁mouseover切換圖片,預設值true
rotatableBoolean旋轉圖片,預設值true
scalableBoolean縮放圖片,預設值true
showClose

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

true#showPaginationBoolean顯示分頁欄,預設值showSwitchArrow#Boolean顯示左右切換箭頭按鈕,預設值showToolbarfalseoptions.keyboardnextString下一張##prev
true
true
Boolean#顯示工具列,預設值
參數#可選鍵名稱說明
closeString#關閉圖片檢視器
任意鍵
# 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: &#39;a&#39;,
    next: &#39;d&#39;,
    rotate: [&#39;up&#39;, &#39;down&#39;],
    scale: &#39;mousewheel&#39;
  }
}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,圖示樣式如下圖:

zx-image-view iconfont

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( ))
#=( )
-(-)
AZ
[({)
#](})
#;(:)
'(")
反斜線

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板