大家在网页上注册登录的时候,经常会看见弹出的遮罩层。
我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层。
这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色随意,能看出效果才是最重要的哈哈哈哈。
以下是html界面:
& lt; body>
& lt; !——主界面——比;
& lt; div类=爸饕北?
& lt; div>登录& lt;/div>
& lt;/div>
& lt; !——设置遮罩层的div——比;
& lt; div id=耙跤啊弊４? lt;/div>
& lt; !——设置登录框——比;
& lt; div id=發oginBox”比;
& lt; div>关闭& lt;/div>
& lt;/div>
& lt;/body>
之前
样式表:
*{填充:0 px;保证金:0 px;}
.main {
宽度:100%;
身高:3000 px;
}
#{阴影
位置:绝对的,//绝对定位在页面左上角
上图:0 px;
左:0 px;
z - index: 1000;
显示:没有;
宽度:100%;
高度:100%;
背景:黄色;
透明度:0.3;
}
# loginBox {
位置:绝对的;
前:260像素;
左:30%;
z - index: 2000;
显示:没有;
宽度:400 px;
身高:200 px;
背景:红色;
边界:1 px固体红;
}
之前
js代码部分:
& lt;脚本type=" text/javascript祝辞
window=function () {
window.onscroll=function () {//动态设置遮罩层的宽高与屏幕可见宽高一致,实现被遮罩页面的全覆盖
. getelementbyid(“阴影”).style.width=document.body.clientWidth +“px”;
. getelementbyid(“阴影”).style.height=document.body.clientHeight +“px”;//兼容谷歌firefox和ie/不同浏览器,获取滚动条到浏览器顶部的位置
var h=document.body。scrollTop + document.documentElement.scrollTop;//用定时器实现下滑页面时,登录框延迟从顶部下滑到指定位置
setTimeout(函数(){//设置登录框始终在界面距离顶部260 px的位置,因为style.top获取的值是数值,不带单位,所以在表达式最后人为添加单位
.style . getelementbyid (“loginBox”)。顶级=260 + h +“px”;
},200);
}
}//遮罩层与登录框弹出事件
函数显示(){
.style . getelementbyid(“阴影”)。显示=翱椤?
.style . getelementbyid (“loginBox”)。显示=翱椤?
}//遮罩层与登录框隐藏事件
函数close () {
.style . getelementbyid(“阴影”)。显示=懊挥小?
.style . getelementbyid (“loginBox”)。显示=懊挥小?
}
& lt;/script>
之前
以上就是啦~
以上所述是小编给大家介绍的javascript实现遮罩层动态效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
