怎么给图片设置一个事件让其随鼠标滚动变大变小
可以使用JavaScript来实现该效果。具体步骤如下:
-
给图片设置一个初始的大小,可以通过CSS样式设置。
-
监听鼠标滚轮事件,可以使用addEventListener()方法。
-
根据滚轮事件的deltaY属性值来判断是向上滚动还是向下滚动。
-
根据滚动的方向来修改图片的大小,可以使用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%。可以根据需要调整缩放比例和动画效果。
原文地址: https://www.cveoy.top/t/topic/b1Xu 著作权归作者所有。请勿转载和采集!