js鼠标滚动放大缩小图片

封面图 • 2025-12-26 • JavaScript

在 JavaScript 中，你可以使用鼠标滚轮（`wheel` 事件）来实现图片的放大和缩小。下面是一个简单的示例，展示如何通过鼠标滚动来放大或缩小一张图片。

---

### ✅ 示例：使用 JavaScript 实现鼠标滚轮控制图片缩放

#### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片缩放</title>
  <style>
    #image-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

#zoom-image {
      transition: transform 0.2s;
    }
  </style>
</head>
<body>

// 鼠标滚轮事件监听
  image.addEventListener('wheel', function(event) {
    event.preventDefault(); // 阻止页面滚动

if (event.deltaY < 0) {
      // 向上滚动，放大
      scale += 0.1;
    } else {
      // 向下滚动，缩小
      scale -= 0.1;
    }

// 限制缩放范围
    scale = Math.max(0.5, Math.min(3, scale));

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

</body>
</html>
```

---

### 📝 说明：

- `event.deltaY` 表示垂直方向上的滚动量：
  - `deltaY < 0`：向上滚动（放大）
  - `deltaY > 0`：向下滚动（缩小）
- `scale` 控制缩放比例。
- `transition` 让缩放更平滑。
- `event.preventDefault()` 防止页面整体滚动。

---

### 🛠 可选增强功能：

- 添加 **双指缩放**（触摸屏支持）：可以使用 `touchstart` 和 `touchmove` 事件。
- 添加 **缩放中心点**：让缩放以鼠标位置为中心（需要计算偏移量）。
- 使用 **CSS transform** 而不是直接设置 `width`/`height` 来保持性能。

---

如果你需要更高级的功能（如拖动、多点触控、限制缩放范围等），也可以告诉我，我可以继续扩展这个示例。

鼠标滚动放大缩小图片