viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)


Posted in jQuery onApril 01, 2020

一、简介

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

Viewer.js 有以下特点:

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转(类似微博的图片旋转)
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式(可做屏保)
支持缩略图
支持标题显示
支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。

二、下载

纯JS版本:

下载地址:https://github.com/fengyuanchen/viewerjs

演示地址:http://demo.3water.com/js/viewerjs/js/

jQuery 版本:

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

演示地址:http://demo.3water.com/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结构

<!-- 单张图片 -->
<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'
});

四、配置

名称 类型 默认值 说明
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 回调函数,具体查看演示

下面是其他网友的补充

需求:在信息详情页面实现点击图片可以预览

准备工作:引入jquery.js、viewer.js 、viewer.css

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>viewer.js图片预览</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的时候位置要放到img标签后边

效果:

viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

到此这篇关于viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)的文章就介绍到这了,更多相关图像查看插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现高级检索功能
May 28 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python subprocess库的使用详解
2018/10/26 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python绘制分布折线图的示例
2020/09/24 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
教师简历自我评价
2014/02/03 职场文书
出纳员的岗位职责
2014/02/22 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
七一表彰大会简报
2015/07/20 职场文书
python turtle绘图命令及案例
2021/11/23 Python