要实现鼠标滚动图片时放大或缩小图片的功能，你可以使用JavaScript（特别是其事件监听功能）与CSS（特别是其转换功能）结合。以下是一个简单的示例，说明如何实现这一功能：
- HTML：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片缩放示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><img id="zoomImage" src="your-image-path.jpg" alt="Zoomable Image"><script src="script.js"></script>
</body>
</html>
- CSS (
styles.css)：
#zoomImage {transition: transform 0.25s ease; /* 平滑缩放效果 */max-width: 100%; /* 确保图片不会超出其容器 */height: auto; /* 保持图片的原始宽高比 */
}
- JavaScript (
script.js)：
document.addEventListener('DOMContentLoaded', function() {const image = document.getElementById('zoomImage');let scale = 1;const scaleStep = 0.1; // 每次滚动的缩放步长const minScale = 0.5; // 最小缩放比例const maxScale = 3; // 最大缩放比例image.onwheel = function(event) {event.preventDefault(); // 阻止默认的滚动行为if (event.deltaY < 0) {// 向上滚动，放大图片scale += scaleStep;} else {// 向下滚动，缩小图片scale -= scaleStep;}// 限制缩放比例在设定的范围内scale = Math.min(Math.max(scale, minScale), maxScale);// 应用缩放效果image.style.transform = `scale(${scale})`;};
});
在这个示例中，我们首先为图片定义了一个初始的CSS样式，包括一个平滑的缩放过渡效果。然后，在JavaScript中，我们监听了图片的wheel事件（该事件在用户滚动鼠标滚轮时触发）。根据滚动的方向（通过event.deltaY判断），我们增加或减少图片的缩放比例，并通过修改图片的transform属性来应用这个缩放效果。同时，我们还通过Math.min和Math.max函数来确保缩放比例不会超出我们设定的范围。
