怎么用js实现鼠标点击小图变为大图
时间: 2024-05-10 11:15:01 浏览: 6
可以通过以下步骤实现鼠标点击小图变为大图的效果:
1. 在 HTML 中,创建一个小图和一个大图的标签,例如:
```html
<img src="small-image.jpg" id="small-image">
<img src="large-image.jpg" id="large-image" style="display:none;">
```
2. 在 CSS 中,定义小图的样式,例如:
```css
#small-image {
width: 100px;
height: 100px;
cursor: pointer;
}
```
3. 在 JavaScript 中,添加点击事件监听器,当用户点击小图时,将大图显示出来,例如:
```javascript
var smallImage = document.getElementById('small-image');
var largeImage = document.getElementById('large-image');
smallImage.addEventListener('click', function() {
largeImage.style.display = 'block';
});
```
4. 添加一个鼠标离开大图区域时,大图恢复隐藏的事件监听器,例如:
```javascript
largeImage.addEventListener('mouseleave', function() {
largeImage.style.display = 'none';
});
```
这样,当用户点击小图时,大图将显示出来,当鼠标离开大图时,大图将恢复隐藏。