快捷導(dǎo)航

viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)

更新時(shí)間：2020年04月01日 22:29:11 作者：寒爵

這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js，這里為分享一下使用方法，需要的朋友可以參考下

一、簡(jiǎn)介

Viewer.js 是一款強(qiáng)大的圖片查看器。

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

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

二、下載

純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、直接引入文件

Javascript版：

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

jQuery版：

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

2、npm安裝

npm install viewerjs

3、Html結(jié)構(gòu)

<!-- 單張圖片 -->
<div>
 <img id="image" data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="圖片1">
</div>

<!-- 多張圖片 -->
<ul id="viewer">
 <li><img data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="圖片1"></li>
 <li><img data-original="img/viewer2.jpg" src="img/viewer2.jpg" alt="圖片2"></li>
 <li><img data-original="img/viewer3.jpg" src="img/viewer3.jpg" alt="圖片3"></li>
 <li><img data-original="img/viewer4.jpg" src="img/viewer4.jpg" alt="圖片4"></li>
 <li><img data-original="img/viewer5.jpg" src="img/viewer5.jpg" alt="圖片5"></li>
 <li><img data-original="img/viewer6.jpg" src="img/viewer6.jpg" alt="圖片6"></li>
</ul>

4、JavaScript

Javascript版：

var image = new Viewer(document.getElementById('image'),{
 url: 'data-original'
});

var viewer = new Viewer(document.getElementById('viewer'),{
 url: 'data-original'
});

jQuery 版：

$('#image').viewer({
 url: 'data-original'
});

$('#viewer').viewer({
 url: 'data-original'
});

四、配置

名稱	類型	默認(rèn)值	說明
inline	布爾值	false	啟用 inline 模式
button	布爾值	true	顯示右上角關(guān)閉按鈕（jQuery 版本無效）
navbar	布爾值/整型	true	顯示縮略圖導(dǎo)航
title	布爾值/整型	true	顯示當(dāng)前圖片的標(biāo)題（現(xiàn)實(shí) alt 屬性及圖片尺寸）
toolbar	布爾值/整型	true	顯示工具欄
tooltip	布爾值	true	顯示縮放百分比
movable	布爾值	true	圖片是否可移動(dòng)
zoomable	布爾值	true	圖片是否可縮放
rotatable	布爾值	true	圖片是否可旋轉(zhuǎn)
scalable	布爾值	true	圖片是否可翻轉(zhuǎn)
transition	布爾值	true	使用 CSS3 過度
fullscreen	布爾值	true	播放時(shí)是否全屏
keyboard	布爾值	true	是否支持鍵盤
interval	整型	5000	播放間隔，單位為毫秒
zoomRatio	浮點(diǎn)型	0.1	鼠標(biāo)滾動(dòng)時(shí)的縮放比例
minZoomRatio	浮點(diǎn)型	0.01	最小縮放比例
maxZoomRatio	數(shù)字	100	最大縮放比例
zIndex	數(shù)字	2015	設(shè)置圖片查看器 modal 模式時(shí)的 z-index
zIndexInline	數(shù)字	0	設(shè)置圖片查看器 inline 模式時(shí)的 z-index
url	字符串/函數(shù)	src	設(shè)置大圖片的 url
build	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
built	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
show	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
shown	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
hide	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
hidden	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
view	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
viewed	函數(shù)	null	回調(diào)函數(shù)，具體查看演示

下面是其他網(wǎng)友的補(bǔ)充

需求：在信息詳情頁面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽

準(zhǔn)備工作：引入jquery.js、viewer.js 、viewer.css

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>viewer.js圖片預(yù)覽</title>
 <script type="text/javascript" src="skin/jquery.js"></script>
 <link rel="stylesheet" href="skin/js/viewer/viewer.css" rel="external nofollow" >
 <script src="skin/js/viewer/viewer.js"></script>
</head>
<body>
 <img id="viewer" src="skin/img/threeHuan.png" alt="hello"></li>
</body>
<script>
 $('#viewer').viewer();
</script>
</html>

注意：js中初始化viewer的時(shí)候位置要放到img標(biāo)簽后邊

效果：

到此這篇關(guān)于viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)的文章就介紹到這了,更多相關(guān)圖像查看插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: