当你在网页上注册时，你会经常看到屏蔽层弹出。

我在这里达到的效果是：点击按钮弹出蒙版图层，蒙版图层下的内容是不可选择的，登录框会随着鼠标滚轮的向下滑动动态浮动到页面的某个位置，点击关闭按钮关闭蒙版图层。

这是鼠标向下滚动到页面中间某个部分时的画面。虽然界面简单，颜色随意，但是可以看出效果才是最重要的。

以下是html界面：

尸体！-主界面-div class=' main ' div onclick=' show()' log in/div/div！-设置遮罩层的div-div id=' shade '/div！-设置登录框-div id='日志收件箱' div onclick=' close()' close/div/div/body样式表：

* { padding:0pxmargin:0px}.主{横向：100%；高度height:3000px} # shade { position:absolute//绝对位于页面左上角的top:0pxleft:0pxz指数：1000；display:none宽度：100%；高度：100%；背景：黄色；opacity:0.3} # loginBox { position : absolute；top:260px左侧：30%；z指数：2000；display:none宽度width:400px高度：200 px；背景：红色；border:1px纯红；}js代码部分：

脚本类型=' text/JavaScript ' window . onload=function(){ window . onscroll=function(){//动态设置遮罩层的宽度和高度与屏幕的可见宽度和高度一致，实现对被遮罩页面文档的全覆盖. getelementbyid(' shade '). style . width=document . body . client width ' px ' document . getelementbyid(' shade '). style . height=document . body . client height ' px '；//兼容Google和ie/firefox的不同浏览器，获取浏览器顶部滚动条的位置var h=document . body . scroll topdocument . document element . scroll top；//使用计时器向下滑动页面时，登录框会延迟从顶部向下滑动到指定位置。setTimeout(function(){ //将登录框始终设置在离界面顶部260px的位置。因为style.top获得的值是没有单位的数字，所以单位文档。getElementByid ('loginbox ')。风格。top=260 h' px '是在表达式末尾人为添加的}，200)；} }//遮罩层和登录框弹出事件函数show(){ document . getelementbyid(' shade ')。style.display=' blockdocument . getelementbyid(' loginBox '). style . display=' block '；}//遮罩层和注册框隐藏事件functionclose(){ document . getelementbyid(' shade ')。style.display=' nonedocument . getelementbyid(' loginBox '). style . display=' none '；}/脚本就这样~

以上就是边肖介绍的javascript遮罩层动态效果的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！