10 行代码快速给网页加上图片浏览器Viewer.js 图像查看器指南【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs想让网页里的商品图放大、旋转、滑动翻页手写要处理滚轮、触摸手势和动画代码量不小。Viewer.js 是 JavaScript 图像查看器把图片浏览这些交互都做好了。 一条命令安装最小代码跑起来npm install viewerjsimport Viewer from viewerjs; import viewerjs/dist/viewer.css; const viewer new Viewer(document.querySelector(.gallery));跑起来后点击 .gallery 里任意一张图片会弹出查看器双击切换大小滚轮缩放方向键翻页。️ 核心能力图片浏览的常见操作都覆盖看大图滚轮、双指、按钮都能放大放大是最常用的交互滚轮、触摸双指、工具栏按钮三种方式都支持缩放后还有小气泡提示当前百分比。放大缩小都支持范围可配置双击切换原始尺寸与初始显示尺寸移动端双指缩放、滑动切图都可用换角度旋转、翻转、拖拽移动放大之后还能旋转、翻转、拖动平移方便看清细节。90° 步进旋转rotateTo 可指定任意角度水平、垂直两个方向翻转拖拽平移范围可限定在图片内翻图与自动播放多张图片时可以逐张切换也可以开播放模式自动轮播。方向键或工具栏按钮切前一张、后一张默认循环看完回到第一张空格键播放/暂停interval 控制间隔️ 常用配置项按需求开关功能默认配置是所有功能打开的状态实际接入时把不用的关掉即可。这几个是平时最常动的inline内嵌到页面而非弹窗toolbar设 false 整体隐藏传对象可去掉单个按钮zoomable/rotatable/movable分别开关缩放、旋转、移动maxZoomRatio限制最大放大倍数new Viewer(img, { inline: true, toolbar: { rotateLeft: false, rotateRight: false }, maxZoomRatio: 5, });思路是按需开启只做预览的话把旋转、翻转关掉留下缩放和移动就够了。实战技巧三个容易踩的坑下面三条能少踩不少坑限制缩放范围minZoomRatio 和 maxZoomRatio 兜底防止缩到看不见或放大成马赛克缩略图展示、原图查看页面放压缩小图url 配置指向原图打开时才加载高清图单图场景关掉循环、导航栏和播放按钮界面更干净这些场景里用它比较合适电商商品详情页上用户能放大看清材质和标签摄影作品集里翻页、自动播放、旋转换角度看大图管理后台用内联模式嵌在列表页里预览不用切页面手机 H5 上触摸切图和双指缩放开箱即用。源码与文档入口示例目录里放了几种用法docs/examples/ 有自定义标题、自定义工具栏、移动范围限制等页面src/js/ 是源码defaults.js 是默认配置methods.js 是全部方法test/specs/ 下 100 多条测试用例覆盖选项、方法与事件能当用法文档看。建议先从示例目录里挑一个页面在浏览器打开再对照默认配置改几个选项就能接到自己的页面上了。【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考