js鼠标滚动放大缩小图片

封面图 • 2025-04-24 • JavaScript

在 JavaScript 中，可以通过监听鼠标滚轮事件来实现图片的放大和缩小功能。以下是一个简单的示例代码，展示了如何通过鼠标滚轮事件来放大或缩小图片：

### HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大缩小</title>
    <style>
        img {
            max-width: 100%;
            transition: transform 0.2s ease;
        }
    </style>
</head>
<body>

image.addEventListener('wheel', (event) => {
            event.preventDefault(); // 阻止默认的滚动行为

// 根据滚轮方向调整缩放比例
            if (event.deltaY > 0) {
                scale *= 0.95; // 向下滚动时缩小
            } else {
                scale *= 1.05; // 向上滚动时放大
            }

// 确保缩放比例不会太小或太大
            scale = Math.max(0.2, Math.min(scale, 3)); // 最小0.2倍，最大3倍

// 应用缩放
            image.style.transform = `scale(${scale})`;
        });
    </script>

</body>
</html>
```

### 解释：
1. **HTML部分**：我们有一个 `<img>` 元素，用于显示图片。
2. **CSS部分**：使用 `transition` 属性为图片的缩放添加平滑过渡效果。
3. **JavaScript部分**：
   - 获取图片元素并设置初始缩放比例为 `1`。
   - 监听图片的 `wheel` 事件（鼠标滚轮事件）。
   - 在事件处理函数中，根据滚轮的方向（`event.deltaY`）调整缩放比例：
     - 如果滚轮向下滚动 (`event.deltaY > 0`)，则缩小图片。
     - 如果滚轮向上滚动 (`event.deltaY < 0`)，则放大图片。
   - 使用 `Math.max` 和 `Math.min` 来限制缩放比例，防止图片变得过大或过小。
   - 最后通过 `image.style.transform = 'scale(${scale})'` 实现图片的缩放。

### 注意事项：
- `event.preventDefault()` 是必需的，否则浏览器会默认执行页面滚动操作。
- 你可以根据需要调整缩放的速度（例如将 `0.95` 和 `1.05` 改为其他值）。

这样你就可以通过鼠标滚轮来放大或缩小图片了！

鼠标滚动放大缩小图片