html img 缩放
时间: 2023-07-01 13:25:38 浏览: 45
要实现HTML中的img图片缩放,可以使用CSS中的transform属性,具体方法如下:
1. 在CSS中设置img标签的样式,例如:
```
img {
width: 200px; /* 设置图片初始宽度 */
}
```
2. 添加鼠标事件,监听鼠标滚轮事件,例如:
```
document.getElementsByTagName('img')[0].addEventListener('mousewheel', function(event) {
event.preventDefault(); // 阻止滚轮默认事件
if (event.deltaY > 0) {
this.style.transform = 'scale(0.9)'; // 缩小0.9倍
} else {
this.style.transform = 'scale(1.1)'; // 放大1.1倍
}
});
```
上面的代码中,我们通过获取第一个img标签,并添加鼠标滚轮事件,当鼠标滚轮向上滚动时,图片将放大1.1倍,当鼠标滚轮向下滚动时,图片将缩小0.9倍。
注意:在使用transform属性进行缩放时,需要将img标签的position属性设置为absolute或fixed,否则缩放后的图片可能会影响到页面布局。
```
img {
position: absolute;
}
```