js鼠标滚动放大缩小图片
2025-04-24 22:16
JavaScript
100
0
0
0
标题录入
封面图
在 JavaScript 中,可以通过监听鼠标滚轮事件来实现图片的放大和缩小功能。以下是一个简单的示例代码,展示了如何通过鼠标滚轮事件来放大或缩小图片: ### HTML: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片放大缩小</title> <style> img { max-width: 100%; transition: transform 0.2s ease; } </style> </head> <body> <img id="myImage" src="your-image.jpg" alt="Sample Image"> <script> const image = document.getElementById('myImage'); let scale = 1; // 初始缩放比例 image.addEventListener('wheel', (event) => { event.preventDefault(); // 阻止默认的滚动行为 // 根据滚轮方向调整缩放比例 if (event.deltaY > 0) { scale *= 0.95; // 向下滚动时缩小 } else { scale *= 1.05; // 向上滚动时放大 } // 确保缩放比例不会太小或太大 scale = Math.max(0.2, Math.min(scale, 3)); // 最小0.2倍,最大3倍 // 应用缩放 image.style.transform = `scale(${scale})`; }); </script> </body> </html> ``` ### 解释: 1. **HTML部分**:我们有一个 `<img>` 元素,用于显示图片。 2. **CSS部分**:使用 `transition` 属性为图片的缩放添加平滑过渡效果。 3. **JavaScript部分**: - 获取图片元素并设置初始缩放比例为 `1`。 - 监听图片的 `wheel` 事件(鼠标滚轮事件)。 - 在事件处理函数中,根据滚轮的方向(`event.deltaY`)调整缩放比例: - 如果滚轮向下滚动 (`event.deltaY > 0`),则缩小图片。 - 如果滚轮向上滚动 (`event.deltaY < 0`),则放大图片。 - 使用 `Math.max` 和 `Math.min` 来限制缩放比例,防止图片变得过大或过小。 - 最后通过 `image.style.transform = 'scale(${scale})'` 实现图片的缩放。 ### 注意事项: - `event.preventDefault()` 是必需的,否则浏览器会默认执行页面滚动操作。 - 你可以根据需要调整缩放的速度(例如将 `0.95` 和 `1.05` 改为其他值)。 这样你就可以通过鼠标滚轮来放大或缩小图片了!
上一篇:
jquery不间断滚动图片效果
下一篇:
js判断今天星期几
鼠标滚动放大缩小图片
标题录入,一次不能超过6条
脑袋里突然灵光一现,如果不写下来,过后就想不起来了
T:0.008173s,M:247.03 KB
返回顶部
留言
留言
评论