-------隐藏的层代码
- <div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display:none;">
- <img src="xxxxx/imgs/xxxx.png">
- </div>
onclick="document.getElementById('mcover').style.display='block';"
-----对应位置的CSS
- #mcover {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.7);
- display: none;
- z-index: 20000;
- }
- #mcover img {
- position: fixed;
- right: 18px;
- top: 5px;
- width: 260px!important;/*图片尺寸最好用百分比,例如width:78%;高度不填*/
- height: 180px!important;
- z-index: 20001;
- }
本文介绍了一种通过JavaScript和CSS实现网页中图片图层的隐藏与显示的方法。点击特定元素时,利用JavaScript控制带有固定ID的div元素的display属性,实现图片的弹出显示效果,并通过CSS设置该div的位置和样式。
1万+

被折叠的 条评论
为什么被折叠?



