html img 点击当前图片后,能不能做到显示遮罩层并在屏幕中央显示图片,再次点击遮罩关闭
时间: 2024-09-25 14:10:34 浏览: 27
在HTML和JavaScript中,你可以实现这样的功能。当用户点击图片时,首先显示一个遮罩层,并将图片居中显示。这通常通过CSS样式和JavaScript事件监听来完成。以下是简单的步骤:
1. 创建HTML结构:
```html
<div class="modal">
<img id="image" src="" alt="图片">
<div class="mask"></div>
</div>
```
2. CSS样式设置:
```css
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
3. JavaScript事件处理:
```javascript
// 获取元素
const modal = document.querySelector('.modal');
const image = document.getElementById('image');
const mask = document.querySelector('.mask');
// 添加点击事件监听器到图片
image.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡到遮罩层
modal.style.display = 'block'; // 显示遮罩
mask.style.display = 'block'; // 显示遮罩
image.style.position = 'absolute'; // 居中图片
});
// 监听全局点击事件,关闭遮罩
document.body.addEventListener('click', function() {
modal.style.display = 'none';
mask.style.display = 'none';
});
```
当你想要改变图片时,只需更新`<img>`标签的`src`属性即可。
阅读全文