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实现图片轮播效果
May 08 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现购物车全功能
Jan 11 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
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript 写类方式之七
2009/07/05 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
销售自我评价
2013/10/22 职场文书
监理员的岗位职责
2013/11/13 职场文书
运动会稿件100字
2014/02/21 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书