web的简单实现
遮罩在网页应用中是很常见的一种功能,很多刚接触的朋友都不知道怎么实现:这里给出一个简单的demo,希望可以帮助到大家。
实现思路:就是在页面放置一个z-index很高的div。(div中不要放置任何东西),通过js,来动态的设置div的高度和宽度。然后再通过css给div设置背景色,透明度等;下面是关键代码:
在页面加入:
<div id="overlay"></div>
css代码:
/* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* 此处的图层要大于页面 */ display:none; }
js代码(基于jquery):
//点击按钮弹出遮罩 $(function(){ $("#btn1").click(function(){ showOverlay(); }); /* 显示遮罩层 */ function showOverlay() { $("#overlay").height(pageHeight()); $("#overlay").width(pageWidth()); // fadeTo第一个参数为速度,第二个为透明度 // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题 $("#overlay").fadeTo(200, 0.5); } /* 隐藏覆盖层 */ function hideOverlay() { $("#overlay").fadeOut(200); } /* 当前页面高度 */ function bodyHeight() { return document.body.scrollHeight; } /* 当前页面宽度 */ function bodyWidth() { return document.body.scrollWidth; } /* 当前浏览器的宽度*/ function pageHeight() { return window.screen.availHeight; } /* 当前浏览器的宽度*/ function pageWidth() { return window.screen.availWidth; } }
跟多资源请关注:去转盘网
扫描二维码关注公众号,回复:
484062 查看本文章