js image鼠标滚动放大

基础概念

在JavaScript中，实现图片鼠标滚动放大的功能通常涉及到以下几个基础概念：

事件监听：监听鼠标滚轮事件（wheel），以便在用户滚动鼠标滚轮时触发相应的处理函数。
缩放变换：使用CSS的transform属性中的scale()函数来实现图片的放大和缩小效果。
边界控制：确保图片在放大或缩小时不会超出其容器的边界，并且保持一定的缩放比例范围。

类型与应用场景

类型：这种功能通常应用于图片查看器、产品展示页面、社交媒体分享等场景。
应用场景：当用户需要查看图片的详细信息或在不同尺度下比较图片时，这种功能非常有用。

示例代码

以下是一个简单的JavaScript示例，展示了如何实现鼠标滚动放大图片的功能：

<!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>
  #imageContainer {
    width: 300px;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #image {
    transition: transform 0.2s ease;
    max-width: 100%;
    max-height: 100%;
  }
</style>
</head>
<body>

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

<script>
  const image = document.getElementById('image');
  let scale = 1;
  const minScale = 0.5; // 最小缩放比例
  const maxScale = 3;   // 最大缩放比例

  image.addEventListener('wheel', (event) => {
    event.preventDefault();
    const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1; // 根据滚轮方向确定缩放因子
    scale *= zoomFactor;

    // 限制缩放比例在最小和最大值之间
    scale = Math.min(Math.max(scale, minScale), maxScale);

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

</body>
</html>