JavaScript鼠标悬停图片放大代码
时间: 2024-09-11 16:05:18 浏览: 46
vue鼠标悬停图片放大特效
5星 · 资源好评率100%
在JavaScript中,你可以通过监听`mouseover`和`mouseout`事件,配合CSS的`:hover`伪类来实现图片的悬停放大效果。下面是一个简单的示例:
HTML部分:
```html
<img id="image" src="your-image-url.jpg" alt="Your Image" style="width:100px; height:100px;">
```
CSS部分 (为了简洁,这里仅设置基本样式):
```css
.image-container {
position: relative;
cursor: pointer;
}
.image-container img:hover {
transform: scale(1.2); /* 缩放比例,可以根据需要调整 */
}
```
JavaScript部分 (通常放在`<head>`标签内的 `<script>`标签中):
```javascript
var image = document.getElementById('image');
image.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.2)';
});
image.addEventListener('mouseout', function() {
this.style.transform = '';
});
```
这个代码会在用户将鼠标移动到图片上时使其放大1.2倍,当鼠标移开时恢复原大小。
阅读全文