imageviewerv2
v0.0.1
Published
```markdown 功能说明 这个精简版保留了核心的缩放功能：
Readme
图片预览器 api 接口文档
功能说明
功能说明
这个精简版保留了核心的缩放功能：
鼠标滚轮缩放：
向上滚动鼠标滚轮放大图片
向下滚动鼠标滚轮缩小图片
缩放时保持鼠标位置不变的视觉效果
初始化居中：
图片加载后自动居中显示
支持 fit（适应容器）和 fill（填充容器）两种初始缩放模式
响应式调整：
窗口大小变化时自动重新计算并调整图片位置
API 接口：
loadImage(url)：加载新图片
zoomIn()：放大图片
zoomOut()：缩小图片
getState()：获取当前状态
destroy()：销毁预览器示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片预览器示例</title>
<style>
.viewer-container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="viewer-container" id="myViewer"></div>
<script src="imageViewer.js"></script>
<script>
// 初始化预览器
const viewer = new ImageViewer('myViewer', {
// imageUrl: 'https://picsum.photos/1200/800',
imageUrl: './images/1.jpg',
initialScale: 'fit', // 初始缩放模式：fit(适应)、fill(填充)或具体数值
minScale: 0.5,
maxScale: 5,
zoomStep: 0.1,
onLoad: (image) => {
console.log('图片加载完成:', image);
},
onChange: (state) => {
console.log('视图状态变化:', state);
}
});
setTimeout(() => {
// 可选：动态加载新图片
viewer.loadImage('./images/2.jpg');
}, 3000);
// viewer.loadImage('https://example.com/another-image.jpg');
</script>
</body>
</html>