css+js+html遮罩层实例,javascript实现遮罩层动态效果实例

大家在网页上注册登录的时候，经常会看见弹出的遮罩层。

我这里实现的效果是：点击按钮弹出遮罩层，遮罩层下的内容不可选，并且登录框随着鼠标滚轮的下滑，动态的浮动到页面某个位置，点击关闭按钮关闭遮罩层。

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

以下是html界面:

登录

关闭

样式表：

*{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代码部分：

window.οnlοad=function(){

window.οnscrοll=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";

}

以上就是啦~

以上所述是小编给大家介绍的javascript实现遮罩层动态效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！