强大的jQuery图片查看器插件Viewer.js
生活随笔
收集整理的這篇文章主要介紹了
强大的jQuery图片查看器插件Viewer.js
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡介
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 版本,版本名字雖然一樣,但代碼不一樣,不能通用。
在線演示及下載
在線演示:http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Viewer.js/
下載頁面
使用方法
引入文件
Javascript版:
jQuery版:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/jquery.min.js"></script> <script src="js/viewer.min.js"></script>Html結(jié)構(gòu)
<ul id="viewer"><li><img src="img/viewer1.jpg" alt="圖片1"></li><li><img src="img/viewer2.jpg" alt="圖片2"></li><li><img src="img/viewer3.jpg" alt="圖片3"></li><li><img src="img/viewer4.jpg" alt="圖片4"></li><li><img src="img/viewer5.jpg" alt="圖片5"></li><li><img src="img/viewer6.jpg" alt="圖片6"></li> </ul>JavaScript
Javascript版:
jQuery 版:
$('#viewer').viewer();配置
| 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ù),具體查看演示 |
轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9973509.html
總結(jié)
以上是生活随笔為你收集整理的强大的jQuery图片查看器插件Viewer.js的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java for循环的这种写法怎么理解:
- 下一篇: 线程的生命周期及五种基本状态介绍