可以使用 JavaScript 来实现图片随着鼠标滚动而放大缩小的效果。具体步骤如下:

  1. 给图片设置一个初始的大小,可以通过 CSS 样式设置。

  2. 监听鼠标滚轮事件,可以使用 addEventListener() 方法。

  3. 根据滚轮事件的 deltaY 属性值来判断是向上滚动还是向下滚动。

  4. 根据滚动的方向来修改图片的大小,可以使用 CSS 的 transform 属性来实现。

以下是示例代码:

HTML 代码:

<img src='image.jpg' alt='image' id='myImage'>

CSS 代码:

#myImage {
  width: 200px;
  height: 200px;
  transition: transform 0.5s ease;
}

JavaScript 代码:

var img = document.getElementById('myImage');

// 监听滚轮事件
window.addEventListener('wheel', function(event) {
  // 判断滚动方向
  if (event.deltaY < 0) {
    // 向上滚动,图片放大
    img.style.transform = 'scale(1.1)';
  } else {
    // 向下滚动,图片缩小
    img.style.transform = 'scale(0.9)';
  }
});

以上代码会让图片在滚轮向上滚动时放大,向下滚动时缩小,每次缩放比例为原来的 10%。可以根据需要调整缩放比例和动画效果。

鼠标滚动放大缩小图片:JavaScript实现方法

原文地址: https://www.cveoy.top/t/topic/nmob 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录