Viewer.js 图片查看器3 行代码给网页图片加上缩放、旋转与平移【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjsViewer.js 是一个前端图片查看器库解决的是让网页上的图片能被用户放大、旋转、平移和轮播这个问题。当你的电商商品详情页需要用户放大查看图片细节或者一个相册需要用键盘快速浏览多张图时它几行代码就能接入。零运行时依赖min zip 不到 25KB官方 API 提供 53 个选项、23 个方法和 17 个事件。读完这篇你能独立跑起一个带缩放和旋转的图片查看器并知道最先该改哪 5 个配置项。 3 分钟跑起来npm install viewerjsimport Viewer from viewerjs; import viewerjs/dist/viewer.css; new Viewer(document.getElementById(image));跑起来后点击图片即弹出全屏查看器滚轮每格缩放 0.1底部工具栏可旋转、翻转方向键切换图片Esc 关闭。不用构建工具也行页面里直接引dist/viewer.css和dist/viewer.js两个文件即可。传一个容器元素而不是单张图片时容器里所有img会自动被收集成一组浏览。 核心能力速览能力说明默认值或触发方式缩放滚轮/双指捏合zoomTo(ratio, pivot)可指定中心点zoomable: true步长 0.1范围 0.01–100旋转rotate(90)相对角度、rotateTo(180)绝对角度rotatable: true翻转scaleX(-1)水平、scaleY(-1)垂直scalable: true移动拖拽平移moveTo(x, y)绝对定位movable: true模态/内联默认点击弹全屏模态嵌入页面需显式开启inline: false轮播play()自动播放可附带请求全屏interval: 5000msloop: true键盘方向键切换/缩放、Space 停止、Esc 关闭仅模态模式keyboard: true缩略导航navbar可按屏宽四档显隐navbar: true2/3/4 档对应 768/992/1200pxtoolbar 支持按按钮细粒度配置传对象时11 个内置按钮zoomIn、rotateLeft、play 等可逐个设置显隐、尺寸small/medium/large和自定义点击行为。docs/examples/ 里的 custom-toolbar 示例就是这种玩法。title 可以是函数title支持[数字, 函数]形式函数接收图片元素及其数据可以在标题栏显示文件名 (宽 × 高)数字部分按 768/992/1200px 三个断点控制显隐。动态图片用 update() 刷新通过 AJAX 增删图片后调用viewer.update()即可同步图片集合不需要销毁实例重建。上图为仓库docs/images/下的 9 张示例图之一官方演示页用它测试全屏浏览、缩放与轮播效果。最常改的 5 个配置项inline— 模态/内联模式切换 — 默认false— 面板内嵌预览时设true此时minWidth默认 200、minHeight默认 100才生效toolbar— 控制底部工具栏 — 默认true— 传对象逐个按钮配置如toolbar: { rotateLeft: false }去掉左转按钮initialCoverage— 图片初始覆盖率0 到 1 — 默认0.9— 想要铺满宽度的初始观感可设1url— 取原图地址的属性 — 默认src— src 是缩略图时用函数返回原图 URLzoomRatio— 滚轮缩放步长 — 默认0.1— 觉得缩放迟钝可提到0.253 个选项的完整列表见 README 的 Options 一节。⚠️ 实际用下来容易踩的坑这里注意 Viewer 的生命周期是异步的ready里只能调showzoomTo、view这类方法要等viewed回调再调刚new Viewer()完就调会报错。别忘改url如果你的缩略图和原图分离viewer 打开的是src指向的缩略图放大后一片马赛克。同页多组图片别重复 new一个容器里的图片组传容器给一个实例即可真正独立的查看行为才各自 new动态增删图片后记得调viewer.update()。 适合谁不适合谁适合商品详情页要看清细节缩放 旋转轻量多图轮播侧边面板嵌入预览inline 模式不需要它只要点击放大的灯箱效果PhotoSwipe 更合适图片标注、编辑或全景/3D 浏览场景上图是仓库中的竖版示例图720×1280用来验证查看器对竖图的自适应与缩放表现。Viewer.js 定位是一个聚焦缩放、旋转、平移的轻量图片查看器不是画廊框架。官方演示页 docs/index.html 与示例目录 docs/examples/ 里的 5 个可运行 demo自定义标题、自定义工具栏、动态图片、移动范围限制、模态框内查看器值得集成后完整跑一遍。【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Viewer.js 图片查看器：3 行代码给网页图片加上缩放、旋转与平移
Viewer.js 图片查看器3 行代码给网页图片加上缩放、旋转与平移【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjsViewer.js 是一个前端图片查看器库解决的是让网页上的图片能被用户放大、旋转、平移和轮播这个问题。当你的电商商品详情页需要用户放大查看图片细节或者一个相册需要用键盘快速浏览多张图时它几行代码就能接入。零运行时依赖min zip 不到 25KB官方 API 提供 53 个选项、23 个方法和 17 个事件。读完这篇你能独立跑起一个带缩放和旋转的图片查看器并知道最先该改哪 5 个配置项。 3 分钟跑起来npm install viewerjsimport Viewer from viewerjs; import viewerjs/dist/viewer.css; new Viewer(document.getElementById(image));跑起来后点击图片即弹出全屏查看器滚轮每格缩放 0.1底部工具栏可旋转、翻转方向键切换图片Esc 关闭。不用构建工具也行页面里直接引dist/viewer.css和dist/viewer.js两个文件即可。传一个容器元素而不是单张图片时容器里所有img会自动被收集成一组浏览。 核心能力速览能力说明默认值或触发方式缩放滚轮/双指捏合zoomTo(ratio, pivot)可指定中心点zoomable: true步长 0.1范围 0.01–100旋转rotate(90)相对角度、rotateTo(180)绝对角度rotatable: true翻转scaleX(-1)水平、scaleY(-1)垂直scalable: true移动拖拽平移moveTo(x, y)绝对定位movable: true模态/内联默认点击弹全屏模态嵌入页面需显式开启inline: false轮播play()自动播放可附带请求全屏interval: 5000msloop: true键盘方向键切换/缩放、Space 停止、Esc 关闭仅模态模式keyboard: true缩略导航navbar可按屏宽四档显隐navbar: true2/3/4 档对应 768/992/1200pxtoolbar 支持按按钮细粒度配置传对象时11 个内置按钮zoomIn、rotateLeft、play 等可逐个设置显隐、尺寸small/medium/large和自定义点击行为。docs/examples/ 里的 custom-toolbar 示例就是这种玩法。title 可以是函数title支持[数字, 函数]形式函数接收图片元素及其数据可以在标题栏显示文件名 (宽 × 高)数字部分按 768/992/1200px 三个断点控制显隐。动态图片用 update() 刷新通过 AJAX 增删图片后调用viewer.update()即可同步图片集合不需要销毁实例重建。上图为仓库docs/images/下的 9 张示例图之一官方演示页用它测试全屏浏览、缩放与轮播效果。最常改的 5 个配置项inline— 模态/内联模式切换 — 默认false— 面板内嵌预览时设true此时minWidth默认 200、minHeight默认 100才生效toolbar— 控制底部工具栏 — 默认true— 传对象逐个按钮配置如toolbar: { rotateLeft: false }去掉左转按钮initialCoverage— 图片初始覆盖率0 到 1 — 默认0.9— 想要铺满宽度的初始观感可设1url— 取原图地址的属性 — 默认src— src 是缩略图时用函数返回原图 URLzoomRatio— 滚轮缩放步长 — 默认0.1— 觉得缩放迟钝可提到0.253 个选项的完整列表见 README 的 Options 一节。⚠️ 实际用下来容易踩的坑这里注意 Viewer 的生命周期是异步的ready里只能调showzoomTo、view这类方法要等viewed回调再调刚new Viewer()完就调会报错。别忘改url如果你的缩略图和原图分离viewer 打开的是src指向的缩略图放大后一片马赛克。同页多组图片别重复 new一个容器里的图片组传容器给一个实例即可真正独立的查看行为才各自 new动态增删图片后记得调viewer.update()。 适合谁不适合谁适合商品详情页要看清细节缩放 旋转轻量多图轮播侧边面板嵌入预览inline 模式不需要它只要点击放大的灯箱效果PhotoSwipe 更合适图片标注、编辑或全景/3D 浏览场景上图是仓库中的竖版示例图720×1280用来验证查看器对竖图的自适应与缩放表现。Viewer.js 定位是一个聚焦缩放、旋转、平移的轻量图片查看器不是画廊框架。官方演示页 docs/index.html 与示例目录 docs/examples/ 里的 5 个可运行 demo自定义标题、自定义工具栏、动态图片、移动范围限制、模态框内查看器值得集成后完整跑一遍。【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考