js鼠标滚动图片放大缩小
时间: 2023-05-13 15:07:10 浏览: 166
可以使用CSS3的transform属性来实现鼠标滚动图片放大缩小的效果。具体实现方法可以参考以下代码:
HTML代码:
```
<div class="image-container">
<img src="your-image-url.jpg" alt="your-image">
</div>
```
CSS代码:
```
.image-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.image-container:hover img {
transform: scale(1.2);
}
```
这段代码会在鼠标滚动时将图片放大1.2倍,当鼠标移开时图片会恢复原始大小。你可以根据需要调整放大倍数和过渡时间。
阅读全文