js鼠标滚轮缩放图片

基础概念

在JavaScript中，鼠标滚轮事件通常用于实现页面的滚动效果，但也可以用来实现图片的缩放功能。鼠标滚轮事件包括wheel事件，该事件在用户滚动鼠标滚轮时触发。

类型与应用场景

类型：

放大/缩小：根据滚轮的方向增加或减少图片的缩放比例。
平滑过渡：使用CSS过渡效果使缩放过程更加平滑。

应用场景：

图片查看器：在网站或应用中提供图片的详细查看功能。
地图服务：允许用户通过滚轮缩放地图视图。
产品展示：在电商网站中放大产品图片以便用户查看细节。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript和CSS实现鼠标滚轮缩放图片的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom with Mouse Wheel</title>
<style>
  #image {
    width: 300px;
    height: auto;
    transition: transform 0.2s ease-in-out;
  }
</style>
</head>
<body>

<img id="image" src="path_to_your_image.jpg" alt="Zoomable Image">

<script>
  const image = document.getElementById('image');
  let scale = 1;

  image.addEventListener('wheel', (event) => {
    event.preventDefault();
    const zoomFactor = 1.1;
    if (event.deltaY < 0) {
      // Zoom in
      scale *= zoomFactor;
    } else {
      // Zoom out
      scale /= zoomFactor;
    }
    image.style.transform = `scale(${scale})`;
  });
</script>

</body>
</html>