强大的jQuery图片查看器插件Viewer.js-阿里云开发者社区

开发者社区> 哈你真皮> 正文

强大的jQuery图片查看器插件Viewer.js

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84179587 简介 Viewer.
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84179587

简介

Viewer.js 是一款强大的图片查看器

Viewer.js 有以下特点:

  • 支持移动设备触摸事件
  • 支持响应式
  • 支持放大/缩小
  • 支持旋转(类似微博的图片旋转)
  • 支持水平/垂直翻转
  • 支持图片移动
  • 支持键盘
  • 支持全屏幻灯片模式(可做屏保)
  • 支持缩略图
  • 支持标题显示
  • 支持多种自定义事件

Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。

在线演示及下载

在线演示:http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Viewer.js/

下载页面

使用方法

引入文件 Javascript版:

<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>

Html结构


<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版:


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

jQuery 版:


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

配置

名称 类型 默认值 说明
inline 布尔值 false 启用 inline 模式
button 布尔值 true 显示右上角关闭按钮(jQuery 版本无效)
navbar 布尔值/整型 true 显示缩略图导航
title 布尔值/整型 true 显示当前图片的标题(现实 alt 属性及图片尺寸)
toolbar 布尔值/整型 true 显示工具栏
tooltip 布尔值 true 显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 使用 CSS3 过度
fullscreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔,单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚动时的缩放比例
minZoomRatio 浮点型 0.01 最小缩放比例
maxZoomRatio 数字 100 最大缩放比例
zIndex 数字 2015 设置图片查看器 modal 模式时的 z-index
zIndexInline 数字 0 设置图片查看器 inline 模式时的 z-index
url 字符串/函数 src 设置大图片的 url
build 函数 null 回调函数,具体查看演示
built 函数 null 回调函数,具体查看演示
show 函数 null 回调函数,具体查看演示
shown 函数 null 回调函数,具体查看演示
hide 函数 null 回调函数,具体查看演示
hidden 函数 null 回调函数,具体查看演示
view 函数 null 回调函数,具体查看演示
viewed 函数 null 回调函数,具体查看演示

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用ScrollView滑动属性实现点击查看更多
利用ScrollView的滚动实现点击查看更多 效果图 更新内容布局 了解更多布局 获取控件 获取ScrollView ScrollView mSvDes = (ScrollView) view.
964 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1700 0
MDF文件查看器(SQL MDF Viewer) 1.0 绿色版
当你想查看一个 SQL Server 数据库的 MDF 文件的时候,而你却没有安装 SQL Server  (那么庞大的一个软件,安装之后想卸载?根本卸载不干静), 那怎么办呢? MDF文件查看器(SQL MDF Viewer) 1.0 绿色版,这是一个很不错的工具,下载即用,不过只有 Windows 版。
1215 0
PNotify – 简单易用的 JS 通知,消息提示插件
  PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify。它旨在提供无与伦比的灵活性,同时很容易使用。它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击通知后面的元素。
1133 0
+关注
294
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载