国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

iOS122 / 979人閱讀

摘要：圖片預覽插件，支持圖片切換旋轉縮放移動瀏覽器支持不支持旋轉功能效果預覽源碼地址默認鍵盤操作方向鍵左右前后圖片切換，上下順時針逆時針旋轉滾動鼠標縮放支持自定義配置，詳見頁尾使用瀏覽器初始化參數見參數說明處使用方法點擊縮略圖，查

zx-image-view

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

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

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

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

默認鍵盤操作 
方向鍵：左left右right前后圖片切換，上up下down順時針逆時針旋轉
滾動鼠標：縮放

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

使用 use

瀏覽器Brower

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107997.html

相關文章

  • jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

    摘要：隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求，經過一個多月的蟄...

    anyway 評論0 收藏0

  • jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

    摘要：隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求，經過一個多月的蟄...

    chaosx110 評論0 收藏0

  • jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

    摘要：隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求，經過一個多月的蟄...

    Airmusic 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<