首页JavaScript鼠标悬停图片放大代码

JavaScript鼠标悬停图片放大代码

时间: 2024-09-11 16:05:18 浏览: 45

在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倍，当鼠标移开时恢复原大小。

阅读全文