javascript实现遮罩层动态效果实例
作者:FutureLilian
这篇文章主要介绍了javascript实现遮罩层动态效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
大家在网页上注册登录的时候,经常会看见弹出的遮罩层。
我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层。
这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色随意,能看出效果才是最重要的哈哈哈哈。
以下是html界面:
<body> <!-- 主界面 --> <div class="main"> <div onclick="show()">登录</div> </div> <!-- 设置遮罩层的div --> <div id="shade"></div> <!-- 设置登录框 --> <div id="loginBox"> <div onclick="close()">关闭</div> </div> </body>
样式表:
*{padding:0px;margin:0px;} .main{ width:100%; height:3000px; } #shade{ position:absolute;//绝对定位在页面左上角 top:0px; left:0px; z-index:1000; display:none; width:100%; height:100%; background:yellow; opacity:0.3; } #loginBox{ position:absolute; top:260px; left:30%; z-index:2000; display:none; width:400px; height:200px; background:red; border:1px solid red; }
js代码部分:
<script type="text/javascript"> window.onload=function(){ window.onscroll=function(){ //动态设置遮罩层的宽高与屏幕可见宽高一致,实现被遮罩页面的全覆盖 document.getElementById("shade").style.width=document.body.clientWidth+"px"; document.getElementById("shade").style.height=document.body.clientHeight+"px"; //兼容谷歌 和 ie/firefox不同浏览器,获取滚动条到浏览器顶部的位置 var h=document.body.scrollTop + document.documentElement.scrollTop; //用定时器实现下滑页面时,登录框延迟从顶部下滑到指定位置 setTimeout(function(){ //设置登录框始终在界面距离顶部260px的位置,因为style.top获取的值是数值,不带单位,所以在表达式最后人为添加单位 document.getElementById("loginBox").style.top=260 + h +"px"; },200); } } //遮罩层与登录框弹出事件 function show(){ document.getElementById("shade").style.display = "block"; document.getElementById("loginBox").style.display = "block"; } //遮罩层与登录框隐藏事件 function close(){ document.getElementById("shade").style.display = "none"; document.getElementById("loginBox").style.display = "none"; } </script>
以上就是啦~
以上所述是小编给大家介绍的javascript实现遮罩层动态效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!