I
ImageViewer
ImageViewer 是一个轻量级的纯 JavaScript 图片查看器库，无需任何第三方依赖。提供了丰富的交互功能，包括缩放、拖拽、键盘快捷键等，适用于各种 Web 项目。
#图片查看器
#工具类
統計
総インストール数
126
直近24時間
+0
ユーザー評価
-
広告
説明
バージョン1
評価0
権限の説明
ImageViewer 是一个轻量级的纯JS图片查看器库，支持缩放、拖拽和键盘快捷键。
読み込み中…
ImageViewer 是一个轻量级的纯 JavaScript 图片查看器库，无需任何第三方依赖。提供了丰富的交互功能，包括缩放、拖拽、键盘快捷键等，适用于各种 Web 项目。 特点：
| 功能 | 描述 |
|---|---|
| 遮罩层显示 | 黑色半透明背景（90%透明度） |
| 图片居中 | 自动将图片居中显示在视口中 |
| 尺寸自适应 | 默认大小不超过视口的 90% |
| 滚轮缩放 | 向上滚动放大，向下滚动缩小 |
| 拖拽移动 | 缩放后可用鼠标拖拽查看 |
| ESC关闭 | 按 ESC 键快速关闭 |
| 点击关闭 | 点击遮罩层或关闭按钮关闭 |
| 防止背景滚动 | 打开时禁止背景页面滚动 |
| 响应式设计 | 自动适配不同屏幕尺寸 |
| 按键 | 功能 |
|---|---|
ESC |
关闭图片查看器 |
| 操作 | 功能 |
|---|---|
| 滚轮向上 | 放大图片 |
| 滚轮向下 | 缩小图片 |
| 点击拖拽 | 移动图片（仅在缩放后可用） |
| 点击遮罩 | 关闭查看器 |
| 点击关闭按钮 | 关闭查看器 |
下载 image-viewer.js 文件，然后在 HTML 中引入：
<script src="path/to/image-viewer.js"></script>
import ImageViewer from './image-viewer.js';
npm install your-image-viewer
const ImageViewer = require('your-image-viewer');// 或import ImageViewer from 'your-image-viewer';
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片查看器示例</title>
</head>
<body>
<img src="photo.jpg" id="myImage" style="cursor: pointer;">
<script src="image-viewer.js"></script>
<script>
// 创建查看器实例
const viewer = new ImageViewer();
// 绑定图片点击事件
document.getElementById('myImage').addEventListener('click', function() {
viewer.open(this.src);
});
</script>
</body>
</html>
使用 bindImages 静态方法快速为多张图片添加查看功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片查看器 - 便捷方法</title>
</head>
<body>
<!-- 为图片添加 data-viewer 属性 -->
<img src="photo1.jpg" data-viewer alt="图片1">
<img src="photo2.jpg" data-viewer alt="图片2">
<img src="photo3.jpg" data-viewer alt="图片3">
<script src="image-viewer.js"></script>
<script>
// 一行代码搞定！
ImageViewer.bindImages('img[data-viewer]');
</script>
</body>
</html>
const viewer = new ImageViewer({
maxZoom: 5, // 最大缩放倍数，默认 5
minZoom: 0.5, // 最小缩放倍数，默认 0.5
zoomStep: 0.1 // 每次滚轮缩放的步长，默认 0.1
});
// 允许更大的缩放范围
const viewer = new ImageViewer({
maxZoom: 10,
minZoom: 0.2,
zoomStep: 0.2
});
// 更精细的缩放控制
const viewer2 = new ImageViewer({
maxZoom: 3,
minZoom: 0.8,
zoomStep: 0.05
});
viewer.open(src)打开图片查看器并显示指定图片。 参数：
src (string) - 图片的 URL 地址示例：
const viewer = new ImageViewer();
viewer.open('https://example.com/photo.jpg');
viewer.close()关闭图片查看器。 示例：
viewer.close();
viewer.destroy()销毁查看器实例，移除所有事件监听器和 DOM 元素。 示例：
viewer.destroy();
ImageViewer.bindImages(selector)批量为图片添加点击查看功能。 参数：
selector (string) - CSS 选择器，默认为 'img[data-viewer]'返回值：
ImageViewer - 返回创建的查看器实例示例：
// 使用默认选择器const viewer = ImageViewer.bindImages();// 自定义选择器const viewer2 = ImageViewer.bindImages('.gallery img');// 为特定类名的图片添加查看功能const viewer3 = ImageViewer.bindImages('.viewable');
<div class="gallery">
<img src="photo1.jpg" data-viewer>
<img src="photo2.jpg" data-viewer>
<img src="photo3.jpg" data-viewer>
<img src="photo4.jpg" data-viewer>
</div>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
</style>
<script>
ImageViewer.bindImages('img[data-viewer]');
</script>
<div class="product">
<img src="product-main.jpg" class="product-image" alt="产品主图">
<div class="thumbnails">
<img src="product-thumb1.jpg" class="thumb" data-full="product-1.jpg">
<img src="product-thumb2.jpg" class="thumb" data-full="product-2.jpg">
<img src="product-thumb3.jpg" class="thumb" data-full="product-3.jpg">
</div>
</div>
<script>
const viewer = new ImageViewer();
// 主图点击查看
document.querySelector('.product-image').addEventListener('click', function() {
viewer.open(this.src);
});
// 缩略图点击查看大图
document.querySelectorAll('.thumb').forEach(thumb => {
thumb.addEventListener('click', function() {
const fullSrc = this.getAttribute('data-full');
viewer.open(fullSrc);
});
});
</script>
<article class="blog-post">
<h1>文章标题</h1>
<p>这是一段文字...</p>
<img src="article-image1.jpg" class="content-image" alt="配图1">
<p>更多内容...</p>
<img src="article-image2.jpg" class="content-image" alt="配图2">
</article>
<script>
ImageViewer.bindImages('.content-image');
</script>
const viewer = new ImageViewer();
// Ajax 获取图片数据
fetch('/api/images')
.then(response => response.json())
.then(images => {
const container = document.getElementById('image-container');
images.forEach(image => {
const img = document.createElement('img');
img.src = image.thumbnail;
img.dataset.full = image.fullSize;
img.style.cursor = 'pointer';
img.addEventListener('click', function() {
viewer.open(this.dataset.full);
});
container.appendChild(img);
});
});
// 为不同区域创建独立的查看器实例
const galleryViewer = new ImageViewer({
maxZoom: 8,
zoomStep: 0.2
});
const productViewer = new ImageViewer({
maxZoom: 3,
zoomStep: 0.1
});
// 画廊图片
document.querySelectorAll('.gallery img').forEach(img => {
img.addEventListener('click', () => galleryViewer.open(img.src));
});
// 产品图片
document.querySelectorAll('.product img').forEach(img => {
img.addEventListener('click', () => productViewer.open(img.src));
});
虽然 ImageViewer 使用内联样式，但你仍然可以通过 CSS 覆盖默认样式：
/* 自定义遮罩层背景 */
.image-viewer-overlay {
background: rgba(0, 0, 0, 0.95) !important;
}
/* 自定义关闭按钮样式 */
.image-viewer-close {
background: rgba(255, 0, 0, 0.8) !important;
font-size: 30px !important;
width: 40px !important;
height: 40px !important;
}
.image-viewer-close:hover {
background: rgba(255, 0, 0, 1) !important;
}
/* 自定义图片边框 */
.image-viewer-image {
border: 3px solid white !important;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
}
如果图片来自其他域名，请确保服务器配置了正确的 CORS 头：
Access-Control-Allow-Origin: *
建议添加错误处理：
const img = document.querySelector('#myImage');
img.addEventListener('error', function() {
console.error('图片加载失败');
});
在移动端使用时，建议添加 viewport 元标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
如果页面有大量图片或长时间运行，建议在不需要时销毁查看器：
const viewer = new ImageViewer();// 使用完毕后viewer.destroy();
原因： 只有当图片缩放大于 1 时才能拖拽。 解决： 先使用滚轮放大图片，然后再尝试拖拽。
原因： 可能被其他元素遮挡或 z-index 不够高。 解决： 检查页面其他元素的 z-index 值，确保不超过 9999。
原因： 可能有其他 JavaScript 代码干扰了 overflow 属性。
解决： 检查其他代码，或手动设置：
viewer.open(src);document.body.style.overflow = 'hidden';
原因： zoomStep 值设置过大。
解决： 调小 zoomStep 值：
const viewer = new ImageViewer({ zoomStep: 0.05 // 更精细的缩放});
| 浏览器 | 版本 | 支持情况 |
|---|---|---|
| Chrome | 60+ | ✅ 完全支持 |
| Firefox | 55+ | ✅ 完全支持 |
| Safari | 11+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 |
| IE | 11 | ⚠️ 需要 polyfill |
IE11 支持： 需要添加以下 polyfill：
MIT License