所属分类:网页特效-图片特效,悬浮层/弹出层
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事件。