Viewer.js 图像查看器实战5 分钟上手绕开 3 个常见坑【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjsViewer.js 是一个用纯 JavaScript 写的轻量图像查看器指向一张 img 或一个装着图片的容器就能得到带缩放、旋转、移动、播放的模态查看器。适合商品详情页、摄影作品集、后台预览这类场景不依赖 jQuery 和 canvas。接下来先把它跑起来再讲最常调的几个配置和常见的坑。 30 秒跑起来先安装npm install viewerjs。然后在页面里准备一个#photos元素一张图片或一个装着多张图片的容器加上这几行import Viewer from viewerjs; import viewerjs/dist/viewer.css; new Viewer(document.getElementById(photos));这几行引入库、引入样式、绑定查看器就完了。传一张图片或一个多图容器都可以后者点击图片才打开左右键或滑动切换。 它能帮你做什么模态浏览点击打开黑底点背景或按 Esc 关闭也有 inline 模式嵌在页面里交互全家桶滚轮/双指缩放、旋转、水平垂直翻转、拖拽移动多图切换方向键或滑动切图默认循环播放按播放键自动切图默认间隔 5 秒事件系统ready、viewed、zoomed 等 17 个事件另有 zoom()、rotate() 等编程方法⚙️ 配置项拆解先调这 5 个inline默认false。改true后查看器嵌在页面里而非模态配合minWidth/minHeight控制区域。后台内嵌预览用它面向用户的页面保持模态。toolbar默认true。也可传对象控制显示哪些按钮及顺序。只允许缩放时把旋转、翻转按钮去掉。zoomable/rotatable/movable默认都true分别控制缩放、旋转、移动。按业务逐个关别全开着不管。loop默认true控制最后一张是否切回第一张。按顺序看的文档类图片建议关掉。url默认src查看时取原图的属性名也可是函数。页面放缩略图时就指到原图字段。 交互细节与手感调优把图片缩放调顺手默认交互已经调得不错滚轮缩放、双击切换原始与初始尺寸、方向键切图、空格暂停播放、Esc 关闭。手感上最值得调的是zoomRatio默认 0.1即滚轮每格缩放 10%觉得太细调到 0.2~0.3发飘就降到 0.05。缩放范围由minZoomRatio/maxZoomRatio控制默认 1% 到 10000%。new Viewer(document.getElementById(photos), { zoomRatio: 0.2, rotatable: false, movable: false, keyboard: false, });触摸端双指缩放是zoomOnTouch、滑动切图是slideOnTouch默认都开。两个建议关的场景inline 嵌在表单页时设keyboard: false别让它抢页面快捷键图片细节很多时设movable: false免得用户把图拖出可视区。 常见场景怎么做三个最常见的落地场景电商商品图页面放缩略图点开放原图。url指原图字段rotatable: false保持方向原图地址要能直接被浏览器访问。摄影作品集多图包进一个容器交给 Viewerloop: true配合播放按钮用interval默认 5000 毫秒调慢一点节奏更舒服。后台预览inline: truekeyboard: false换图后调update()离开页面调destroy()别留着事件监听。️ 避坑与性能图片多时打开查看器卡初始化要等所有img加载完才就绪图片多时你大概率会碰到。页面src放缩略图url指原图查看时再换。查看器被弹窗盖住默认zIndex是 2015比不少组件库弹窗低在 modal 里打开查看器大概率会被盖住。设zIndex: 3000。配了url原图没换上url是属性名不是网址url: xxx.jpg是错的应写url: data-originalimg 上对应属性放原图地址。 接下来看哪里所有配置项的定义与注释src/js/defaults.js可运行的示例页自定义工具栏、移动范围限制、modal 内嵌等docs/examples/想确认某个配置的边界行为test/specs/options/ 每个配置项都有一份测试规格。【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考