纯JS图片查看器PhotoViewer(原创)

所属分类： JQ特效媒体幻灯片和轮播图

查看演示立即下载

插件描述：仿 Windows 图片查看器纯JS版

更新时间：2021-07-19 00:00:47

更新说明：添加自定义按钮配置项修复多个弹窗并存时的键盘事件问题移除影响渲染效率的模糊滤镜样式优化图片样式

更新时间：2019/10/15 上午10:44:01

更新说明：添加 RTL 支持

更新时间：2019/7/22 下午4:09:51

更新说明：更改文档中 draggable 拼写错误

更新时间：2019/7/15 上午9:46:30

更新说明：修复 zIndex 无法设置等问题，添加 `appendTo` 选项

更新时间：2019/6/28 上午8:56:53

更新说明：添加`关闭`键盘事件

更新时间：2019/5/28 上午9:05:08

更新说明：修复加载动画垂直居中、代码优化

更新时间：2019/5/14 上午10:28:35

更新说明：添加 types 类型文件

PhotoViewer

PhotoViewer是一个JS插件，可以像在Windows中一样查看图像。

主要特点

Vanilla JS
浏览器支持IE9 +
模态可拖动
模态可调整大小
模态最大化
图像可移动
图像可缩放
图像可旋转
键盘控制
全屏显示
多个实例

基本用法

第1步：包含文件

<!--核心CSS文件 -->
<link href="/path/to/photoviewer.css" rel="stylesheet">
<!--核心JS文件 -->
<script src="/path/to/photoviewer.js"></script>

第2步：初始化

photoviewer的用法非常简单，PhotoViewer构造函数有2个参数。

包含图像信息对象的数组。

选项

//构建图像数组
var items = [
    {
        src: 'path/to/image1.jpg', // 图像路径
        title: 'Image Caption 1' //如果你跳过它，会显示原始图像名称
    },
    {
        src: 'path/to/image2.jpg',
        title: 'Image Caption 2'
    }
];
//定义选项（如果需要）
var options = {
    // optionName: 'option value'
    // 例如：
    index: 0 // 此选项表示您将从第一张图片开始
};
//初始化插件
var viewer = new PhotoViewer(items, options);

第3步：绑定事件

最后，在初始化时绑定按钮元素上的click事件。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery滚动视觉差插件paroller.js1.44
下一个特效：移动端大转盘抽奖指定奖品+中奖名单轮播（原创）