用JavaScript实现鼠标滚动缩放图片，让你的网页更加生动！

好的，以下是一个基于JavaScript的示例代码：

HTML部分：

<div id="image-container">
  <img id="my-image" src="example.jpg" alt="Example Image">
</div>

CSS部分：

#image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#my-image {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s ease-in-out;
}

JavaScript部分：

// 获取图像元素
var image = document.getElementById('my-image');

// 设置初始缩放比例
var scale = 1;

// 当鼠标滚动时执行
window.onwheel = function(event) {
  // 检查是否按下了ctrl键
  if (event.ctrlKey == true) {
    event.preventDefault(); // 阻止默认滚动事件

    // 计算缩放比例
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    scale += delta / 10;

    // 应用缩放变换到图像
    image.style.transform = 'scale(' + scale + ')';
  }
};

当用户滚动鼠标时，此代码将检测是否已按下ctrl键，如果已按下，它将计算鼠标滚动的方向并增加或减少缩放比例。然后将应用所得到的转换到图像元素上。

请注意，此代码仅是示例。您需要根据自己的应用场景进行适当的修改。