jQuery中图像查看插件viewer.js的使用示例

　　介绍

这篇文章主要介绍了jQuery中图像查看插件查看器。js的使用示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。

<强>一、简介

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

查看器。js有以下特点:

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

<强>二,下载

纯js版本:

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

jQuery版本:

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

<强>三、使用方法

1,直接引入文件Javascript版:

& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/癱ss/viewer.min.css”rel=巴獠縩ofollow”rel=巴獠縩ofollow”>
& lt;脚本src=https://www.yisu.com/zixun/" js/viewer.min.js ">

jQuery版:

& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/癱ss/viewer.min.css”rel=巴獠縩ofollow”rel=巴獠縩ofollow”>
& lt;脚本src=https://www.yisu.com/zixun/" js/jquery.min.js ">
& lt;脚本src=https://www.yisu.com/zixun/" js/viewer.min.js ">

2, npm安装

npm安装viewerjs

3, Html结构

& lt; !——,单张图片,——比; 　　& lt; div> 　　,& lt; img  id=癷mage", data-original=癷mg/viewer1.jpg", src=https://www.yisu.com/zixun/癷mg/viewer1.jpg”alt="图片1”> 　　
　　 　　 　　
    　　<李> 图片1 　　<李> 图片2 　　<李> 图片3”> </李> 　　<李> <img data-original=癷mg/viewer4.jpg”src= 　　<李> 图片5”> </李> 　　<李> <img data-original=癷mg/viewer6.jpg”src= 　　

4, JavaScript JavaScript版:

var  image =, new 查看器(. getelementbyid(& # 39;图像# 39;),{ 　　,url: & # 39; data-original& # 39; 　　}); 　　 　　var  viewer =, new 查看器(. getelementbyid(& # 39;观众# 39;),{ 　　,url: & # 39; data-original& # 39; 　　});jQuery版:

美元(& # 39;#图片# 39;).viewer ({ 　　,url: & # 39; data-original& # 39; 　　}); 　　 　　$(& # 39;#查看器# 39;).viewer ({ 　　,url: & # 39; data-original& # 39; 　　});

<强>四,配置

名称类型默认值说明内联布尔值假启用内联模式按钮布尔值真实显示右上角关闭按钮(jQuery版本无效)导航条布尔值/整型真正显示缩略图导航标题布尔值/整型真正显示当前图片的标题(现实alt属性及图片尺寸)工具栏布尔值/整型真正显示工具栏提示布尔值真实显示缩放百分比可移动的布尔值真实图片是否可移动缩放的布尔值真实图片是否可缩放可旋转的布尔值真实图片是否可旋转可伸缩的布尔值真实图片是否可翻转过渡布尔值真正使用CSS3过度全屏布尔值真的播放时是否全屏键盘布尔值真的是否支持键盘间隔整型5000播放间隔,单位为毫秒zoomRatio浮点型0.1鼠标滚动时的缩放比例minZoomRatio浮点型0.01最小缩放比例maxZoomRatio数字100年最大缩放比例zIndex数字2015年设置图片查看器模态模式时的z-indexzIndexInline数字0设置图片查看器内联模式时的z-indexurl字符串/函数src设置大图片的urlbuild函数空回调函数,具体查看演示建函数空回调函数,具体查看演示显示函数空回调函数,具体查看演示证明函数空回调函数,具体查看演示隐藏函数空回调函数,具体查看演示隐藏函数空回调函数,具体查看演示视图函数空回调函数,具体查看演示查看函数空回调函数,具体查看演示

jQuery中图像查看插件viewer.js的使用示例