企业官网建设流程全解析

三步搞定 Viewer.js：给网页加上图像查看的完整指南

【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs

Viewer.js 是一个轻量级的开源 JavaScript 图像查看器，解决一个具体问题：用户在网页上点开一张图后，能缩放、旋转、平移、切换下一张，而不是只能开新窗口。它提供 53 个配置项、23 个操作方法和 17 个事件，你按需取用即可。

🎯 先想象一个场景

商品详情页、摄影作品集，用户点开一张缩略图后，都希望看清细节：放大看局部、转个角度、翻到下一张。这些交互如果手写，要处理手势、坐标换算和动画过渡，工作量不小。Viewer.js 把这部分封装好了：你只需对页面里现成的img标签实例化一次，交互就全部生效。

🚀 一行命令装好它，三步完成初始化

安装只需一条命令：

npm install viewerjs

初始化三步：给img加一个 id，引入库和它的样式，然后实例化。

import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css'; const viewer = new Viewer(document.getElementById('image'));

创建后默认是模态模式：点击图片弹出带遮罩的浮层浏览。想改成内联模式（查看器直接嵌在页面中）或调整其他行为，在第二个参数里传配置对象即可。

🖱️ 让用户自己操作：缩放、旋转、平移

这些交互默认全部打开，你不用写一行代码。

缩放：0.01% 到 10000%

滚轮缩放鼠标，双指捏合缩放触屏。缩放范围最小到 0.01%，最大到 10000%。每滚一格的步长默认 0.1（zoomRatio），屏幕上会浮出当前百分比提示。

旋转和翻转

工具栏上的按钮每次旋转 90 度；在代码里调用rotateTo可以指定任意角度。翻转分水平和垂直两个方向，按钮都在工具栏里。

拖拽平移，键盘也管用

按住图片拖动即可平移。键盘方面：方向键切上一张和下一张，空格键暂停或继续自动播放，ESC 退出全屏或关闭查看器。

⚙️ 想开哪个功能就开哪个

53 个配置项覆盖了显示、交互、行为和事件回调。最常用的几个如下，默认值即开箱状态：

再看三个显示相关的行为：模态模式下点击遮罩默认关闭，可用backdrop设为static禁止；内联模式的最小宽高由minWidth和minHeight控制，默认 200 和 100 像素；调用play自动播放时默认请求浏览器全屏（fullscreen: true）。

🧩 改工具栏按钮，监听每一个动作

toolbar不只接受布尔值。传一个对象后，你可以决定每个按钮显不显示、小屏幕上显示几个、以及绑定自己的点击行为。内置按钮共 11 个：放大、缩小、原始尺寸、重置、上一张、播放、下一张、左旋、右旋、水平翻转、垂直翻转。

事件系统共 17 个，按"进行中 / 完成"成对出现：ready（初始化完成）、view/viewed（切换前后）、move/moved、rotate/rotated、scale/scaled、zoom/zoomed、play/stop、show/shown、hide/hidden。想记录当前缩放百分比就监听zoomed；想在每张看完后预加载下一张就监听viewed。

🏭 上线前检查这三件事

1. 图片数量大时开启懒加载，避免首屏一次性下载所有资源。
2. 用minZoomRatio和maxZoomRatio收拢缩放范围，并视情况配合movable，防止用户把图拖到完全看不见。
3. 窗口尺寸变化时查看器会自动重算布局，发布前在小屏设备上过一遍。

📖 去哪看效果，去哪读源码

如果页面里同时存在"多张图"和"要看清细节"两个需求，它就适用：电商商品展示、摄影作品集、文档预览、社媒图片查看都属于这类场景。

可运行的示例在 docs/examples/，含动态图片、自定义标题、弹窗内使用等用例；源码在 src/js/，按render、handlers、methods等模块拆分，配合 23 个操作方法对照阅读很快。

下次页面需要"用户把图看仔细"时，加上 Viewer.js，配好选项，就完了。

【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs