您现在的位置是:技术博客 > 前端前端 viewerjs图片查看器 Lucas2023-01-30 20:20【代码】297人已围观 简介Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便。 #### 一、下载插件 1、<a href="https://www.baidu.com/download/share/viewerjs-main.zip" target='_blank'>点此下载</a> 对应的完整资源包,里面包含文档和示例。 #### 二、简单实践 只需要引入viewer.js和viewer.css文件即可,监听id=galley下的所有img元素,默认显示img的src路径图片,点击后显示data-original路径的打图。 参考解压资源包下的/viewerjs-main/docs/examples/cutom-title.html页面,代码如下。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Viewer.js</title> <link rel="stylesheet" href="../css/viewer.css"> </head> <body> <div class="container"> <h1>Viewer 查看器</h1> <div id="galley"> <ul class="pictures"> <li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li> <li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li> <li><img data-original="../images/tibet-3.jpg" src="../images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li> </ul> </div> </div> <script src="../js/viewer.js"></script> <script> window.addEventListener('DOMContentLoaded', function () { var galley = document.getElementById('galley'); var viewer = new Viewer(galley, { url: 'data-original', title: function (image) { return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')'; }, }); }); </script> </body> </html> ``` 效果图如下:  #### 三、详细配置参数 | 名称 | 类型 | 默认值 | 说明 | | ------------ | ------------ | ------------ | ------------ | | 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 | 回调函数,具体查看演示 | 转载:感谢您对Lucas个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源Lucas个人博客”。 很赞哦! ( 0 ) 上一篇:减小PS输出的图片size 下一篇:Node管理工具nvm-desktop 相关文章 ueditor工具栏浮动bug 有趣的js插件 动态DOM的事件绑定 推荐一个炫酷的背景插件 点击排行 生活不止眼前的苟且,还有诗和远方 十年一觉电影梦 奥地利基茨比厄尔 禅修治愈身心 自律成就自我 零边际成本社会 Modern PHP 鸟哥的Linux私房菜 本栏推荐 要技术,更要有创意 定时任务 Curl无法发送https请求 Lnmp环境搭建 常用的SQL函数 Windows的cmd指令 ueditor工具栏浮动bug 有趣的js插件 标签云 git laravel swoole javascript vue ajax html css sql linux docker flask django nginx apache thinkphp markdown sublime wechat layui photoshop nodejs mysql windows composer java maven springboot mybatis IDE 猜你喜欢 Swoole 基础篇一(初识) PHP进程管理器 正则的快速上手 Sublime代码格式化 Lnmp环境搭建 高并发库存防控超量 Linux之top命令 常用的SQL函数 站点信息 建站时间:2018-05-01 在线人数:1人 文章统计:263篇 总浏览量:222518次 统计数据:百度统计 个人信息:扫描二维码查看