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

資訊專欄INFORMATION COLUMN

zx-image-view圖片查看插件-切換、旋轉(zhuǎn)、縮放、移動

iOS122 / 974人閱讀

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

zx-image-view

圖片預(yù)覽插件，支持圖片切換、旋轉(zhuǎn)、縮放、移動...

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

效果預(yù)覽：https://capricorncd.github.io...

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

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

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

使用 use

瀏覽器Brower

npm

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

ES6+

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

開發(fā)調(diào)試

npm run start
# http://localhost:9000/
效果圖 preview

參數(shù) options
參數(shù) 類型 說明
backgroundOpacity Floor 背景遮罩(黑色)透明度，取值0-1，默認值0.6
keyboard Object 鍵盤按鈕(前/后一張、縮放、旋轉(zhuǎn)、關(guān)閉)配置
paginationable Boolean 分頁mouseover切換圖片，默認值true
movable Boolean 移動圖片，默認值true
rotatable Boolean 旋轉(zhuǎn)圖片，默認值true
scalable Boolean 縮放圖片，默認值true
showClose Boolean 顯示關(guān)閉預(yù)覽窗口按鈕，默認值true
showPagination Boolean 顯示分頁欄，默認值true
showSwitchArrow Boolean 顯示左右切換箭頭按鈕，默認值true
options.keyboard
參數(shù) 類型 可選鍵名 說明
prev String 任意鍵或mousewheel 上一張；為mousewheel時，next無效
next String 任意鍵 下一張
scale String或Array 任意鍵或mousewheel 圖片縮放
rotate String或Array 任意鍵或mousewheel 圖片旋轉(zhuǎn)
close String 關(guān)閉圖片查看器

注意：參數(shù)中只能包含有且一個mousewheel配置；任何配置均不支持組合鍵。

keyboard參數(shù)可選屬性見頁尾--附錄

 // 初始化參數(shù)
let _config = {
  // 分頁mouseover切換圖片
  paginationable: true,
  // 顯示關(guān)閉按鈕
  showClose: true,
  // 顯示上一張/下一張箭頭
  showSwitchArrow: true,
  // 顯示分頁導(dǎo)航欄
  showPagination: true,
  // 縮放
  scalable: true,
  // 旋轉(zhuǎn)
  rotatable: true,
  // 移動
  movable: true,
  // 鍵盤配置
  keyboard: {
    prev: "a",
    next: "d",
    rotate: ["up", "down"],
    scale: "mousewheel"
  }
}
new ZxImageView(_config);
方法 methods

destroy() 銷毀當(dāng)前圖片查看dom對象

init(imageArray, index) 初始化圖片數(shù)據(jù)

參數(shù) 類型 必須 說明
imageArray Array 是 圖片url數(shù)組
index Number 否 imageArray的索引，默認顯示的第index + 1張圖片；默認為0; 如果index > imageArray.length將被忽略

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

參數(shù) 類型 必須 說明
imageArray Array 是 圖片url數(shù)組

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

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

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

屬性 鍵名/說明
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 空格鍵
數(shù)字鍵盤
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 .小數(shù)點
編輯鍵區(qū)
insert Insert 鍵
home Home 鍵
end End 鍵
pageUp PageUp 鍵
pageDown PageDown
delete Delete 鍵
left 方向鍵左(ArrowLeft)
right 方向鍵右(ArrowRight)
up 方向鍵上(ArrowUp)
down 方向鍵下(ArrowDown)
鼠標(biāo)滾動 說明
mousewheel 鼠標(biāo)滾動鍵
Github

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107997.html

相關(guān)文章

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

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

    anyway 評論0 收藏0

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

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

    chaosx110 評論0 收藏0

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

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

    Airmusic 評論0 收藏0

發(fā)表評論

0條評論

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