js鼠标滚动放大缩小代码

在JavaScript中实现鼠标滚动放大缩小的功能，通常涉及到监听鼠标滚轮事件，并根据滚动的方向来调整元素的缩放比例。以下是一个简单的示例代码，展示了如何实现这一功能：

基础概念

鼠标滚轮事件：wheel 事件在用户滚动鼠标滚轮时触发。
缩放变换：使用CSS的 transform 属性中的 scale() 函数来实现元素的缩放。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Wheel Zoom</title>
<style>
  #zoomable {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: transform 0.1s; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<div id="zoomable"></div>

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

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

    // 根据滚轮方向调整缩放比例
    if (event.deltaY < 0) {
      scale += 0.1; // 向上滚动，放大
    } else {
      scale -= 0.1; // 向下滚动，缩小
    }

    // 限制最小和最大缩放比例
    scale = Math.min(Math.max(0.1, scale), 3);

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

</body>
</html>