Viewer.js 是一款強(qiáng)大的圖片預(yù)覽查看器,之前在做項目的時候遇到的是無法給網(wǎng)頁中的圖片添加一個強(qiáng)大的預(yù)覽功能,而Viewer.js剛好滿足了我的需求。本文就簡單的介紹一下這樣一個神奇的圖片預(yù)覽插件:
//原生版本
https://github.com/fengyuanchen/viewerjs
//jquery版本
https://github.com/fengyuanchen/jquery-viewer
支持移動設(shè)備觸摸事件
支持響應(yīng)式
支持放大/縮小
支持旋轉(zhuǎn)(類似微博的圖片旋轉(zhuǎn))
支持水平/垂直翻轉(zhuǎn)
支持圖片移動
支持鍵盤
支持全屏幻燈片模式(可做屏保)
支持縮略圖
支持標(biāo)題顯示
支持多種自定義事件
從功能來看,這是一款功能強(qiáng)大的圖片預(yù)覽插件,對于基本的需求大多數(shù)都可以滿足,而且自帶原生版本和jquery版本,方便使用!
安裝
現(xiàn)在大多數(shù)情況直接使用npm進(jìn)行安裝,當(dāng)然也可以下載發(fā)不好的js文件進(jìn)行使用
npm install viewerjs
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
用法
new Viewer(element[, options])
由于排版原因,這里直接放截圖,或者大家可以到Github上查看詳細(xì)的配置
Viewerjs的作者不僅僅是這樣一個作品,他還有一個另外的圖片類作品,Web端的圖片裁剪插件,同樣推薦給大家:
https://github.com/fengyuanchen/cropperjs