本文介绍了一种使用CSS和JavaScript实现页面遮罩层和引导层的方法，通过动态调整遮罩层和引导层的高度和宽度来适配不同屏幕尺寸，确保用户在浏览网页时的体验。
<style type="text/css">
/* 半透明的遮罩层 */
#mask{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}
#guide{display:none;position:absolute;left:76px;top:5px;z-index:19999;}
#guide img{width:260px;height:180px;}
</style>
//css是重中之重
<body onload="showMask()">
<div id="mask" class="mask" onclick="hideMask()">
<div id="guide">
<img src="images/guide_invi.png">
</div>
</div>
<script type="text/javascript">
//显示遮幕层
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
$("#guide").css("height",$(document).height());
$("#guide").css("width",$(document).width());
$("#guide").show();
}
//隐藏遮罩层
function hideMask(){
$("#mask").hide();
}
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
