腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

viewer.js基于網(wǎng)頁中的一款強(qiáng)大的圖片查看器插件(基于jQuery或原生js)

viewer.js圖像查看器

投訴報(bào)錯(cuò)

腳本大?。?span>2.7KB
腳本語言：英文軟件
腳本類型：國外軟件
腳本授權(quán)：免費(fèi)軟件
腳本類別：ajax/javascript
應(yīng)用平臺(tái)：javascript
更新時(shí)間：2020-04-02
網(wǎng)友評(píng)分：

360通過騰訊通過金山通過

2.7KB

詳情介紹

Viewer.js是一款強(qiáng)大的圖片查看器，它支持觸摸事件、支持響應(yīng)式、支持放大/縮小、支持旋轉(zhuǎn)、支持翻轉(zhuǎn)、支持圖片移動(dòng)、支持鍵盤、支持縮略圖、支持標(biāo)題顯示、支持多種自定義事件。

效果圖：

Viewer.js 有以下特點(diǎn)：

支持移動(dòng)設(shè)備觸摸事件
支持響應(yīng)式
支持放大/縮小
支持旋轉(zhuǎn)（類似微博的圖片旋轉(zhuǎn)）
支持水平/垂直翻轉(zhuǎn)
支持圖片移動(dòng)
支持鍵盤
支持全屏幻燈片模式（可做屏保）
支持縮略圖
支持標(biāo)題顯示
支持多種自定義事件
Viewer.js 提供了純 JS 版本和 jQuery 版本,版本名字雖然一樣，但代碼不一樣，不能通用。

注意：JS 版本兼容 IE9+，jQuery 版本兼容 IE8+。

下載

純JS版本：

下載地址：https://github.com/fengyuanchen/viewerjs

演示地址：http://demo.jb51.net/js/viewerjs/js/

jQuery 版本：

下載地址：https://github.com/fengyuanchen/jquery-viewer

演示地址：http://demo.jb51.net/js/viewerjs/jquery/

使用方法

1、引入文件

JS 版本：

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

jQuery 版本：

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>

注意：JS 版本和 jQuery 版本名字雖然一樣，但代碼不一樣，不能通用，請(qǐng)到 github 上下載需要的版本。

2、HTML

<ul id="jb51">
<li><img src="img/tibet-1.jpg" alt="圖片1"></li>
<li><img src="img/tibet-2.jpg" alt="圖片2"></li>
<li><img src="img/tibet-3.jpg" alt="圖片3"></li>
<li><img src="img/tibet-4.jpg" alt="圖片4"></li>
<li><img src="img/tibet-5.jpg" alt="圖片5"></li>
<li><img src="img/tibet-6.jpg" alt="圖片6"></li>
</ul>

3、JavaScript

JS 版本：

var viewer = new Viewer(document.getElementById('jb51'));

jQuery 版本：

$('#jb51').viewer();

更詳細(xì)的用法可以參考這篇文章：http://m.fzitv.net/article/183978.htm

viewer.js 圖像查看圖片查看

下載地址

下載錯(cuò)誤？【投訴報(bào)錯(cuò)】