大家在網頁上注冊登入的時候，經常會看見彈出的遮罩層。
我這裡實作的效果是：點選按鈕彈出遮罩層，遮罩層下的内容不可選，并且登入框随着滑鼠滾輪的下滑，動态的浮動到頁面某個位置，點選關閉按鈕關閉遮罩層。
這是滑鼠滾動下滑到頁面中間某部分時畫面。雖然界面簡單顔色随意，能看出效果才是最重要的哈哈哈哈。
以下是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實作遮罩層動态效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！