js鼠标滚动放大缩小图片
封面图
•
2025-12-26
•
JavaScript
232
0
0
0
在 JavaScript 中,你可以使用鼠标滚轮(`wheel` 事件)来实现图片的放大和缩小。下面是一个简单的示例,展示如何通过鼠标滚动来放大或缩小一张图片。 --- ### ✅ 示例:使用 JavaScript 实现鼠标滚轮控制图片缩放 #### HTML ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片缩放</title> <style> #image-container { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } #zoom-image { transition: transform 0.2s; } </style> </head> <body> <div id="image-container"> <img id="zoom-image" src="your-image.jpg" alt="Zoomable Image"> </div> <script> const image = document.getElementById('zoom-image'); let scale = 1; // 鼠标滚轮事件监听 image.addEventListener('wheel', function(event) { event.preventDefault(); // 阻止页面滚动 if (event.deltaY < 0) { // 向上滚动,放大 scale += 0.1; } else { // 向下滚动,缩小 scale -= 0.1; } // 限制缩放范围 scale = Math.max(0.5, Math.min(3, scale)); image.style.transform = `scale(${scale})`; }); </script> </body> </html> ``` --- ### 📝 说明: - `event.deltaY` 表示垂直方向上的滚动量: - `deltaY < 0`:向上滚动(放大) - `deltaY > 0`:向下滚动(缩小) - `scale` 控制缩放比例。 - `transition` 让缩放更平滑。 - `event.preventDefault()` 防止页面整体滚动。 --- ### 🛠 可选增强功能: - 添加 **双指缩放**(触摸屏支持):可以使用 `touchstart` 和 `touchmove` 事件。 - 添加 **缩放中心点**:让缩放以鼠标位置为中心(需要计算偏移量)。 - 使用 **CSS transform** 而不是直接设置 `width`/`height` 来保持性能。 --- 如果你需要更高级的功能(如拖动、多点触控、限制缩放范围等),也可以告诉我,我可以继续扩展这个示例。
上一篇:
jquery不间断滚动图片效果
下一篇:
js判断今天星期几
鼠标滚动放大缩小图片
标题录入,一次不能超过6条
留言
评论