javascript實現(xiàn)遮罩層動態(tài)效果實例

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:57:09

javascript實現(xiàn)遮罩層動態(tài)效果實例

javascript實現(xiàn)遮罩層動態(tài)效果實例:大家在網(wǎng)頁上注冊登錄的時候，經(jīng)常會看見彈出的遮罩層。我這里實現(xiàn)的效果是：點擊按鈕彈出遮罩層，遮罩層下的內(nèi)容不可選，并且登錄框隨著鼠標滾輪的下滑，動態(tài)的浮動到頁面某個位置，點擊關(guān)閉按鈕關(guān)閉遮罩層。這是鼠標滾動下滑到頁面中間某部分時畫面。雖然

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript實現(xiàn)遮罩層動態(tài)效果實例:大家在網(wǎng)頁上注冊登錄的時候，經(jīng)常會看見彈出的遮罩層。我這里實現(xiàn)的效果是：點擊按鈕彈出遮罩層，遮罩層下的內(nèi)容不可選，并且登錄框隨著鼠標滾輪的下滑，動態(tài)的浮動到頁面某個位置，點擊關(guān)閉按鈕關(guān)閉遮罩層。這是鼠標滾動下滑到頁面中間某部分時畫面。雖然

大家在網(wǎng)頁上注冊登錄的時候，經(jīng)常會看見彈出的遮罩層。

我這里實現(xiàn)的效果是：點擊按鈕彈出遮罩層，遮罩層下的內(nèi)容不可選，并且登錄框隨著鼠標滾輪的下滑，動態(tài)的浮動到頁面某個位置，點擊關(guān)閉按鈕關(guān)閉遮罩層。

這是鼠標滾動下滑到頁面中間某部分時畫面。雖然界面簡單顏色隨意，能看出效果才是最重要的哈哈哈哈。

以下是html界面:

<body>
<!-- 主界面 -->
<div class="main">
 <div onclick="show()">登錄</div>
</div>
 
 <!-- 設置遮罩層的div -->
<div id="shade"></div>
 <!-- 設置登錄框 -->
<div id="loginBox">
 <div onclick="close()">關(guān)閉</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(){
	//動態(tài)設置遮罩層的寬高與屏幕可見寬高一致，實現(xiàn)被遮罩頁面的全覆蓋
	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;
	//用定時器實現(xiàn)下滑頁面時，登錄框延遲從頂部下滑到指定位置 
	setTimeout(function(){
	 //設置登錄框始終在界面距離頂部260px的位置,因為style.top獲取的值是數(shù)值，不帶單位，所以在表達式最后人為添加單位
	 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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript實現(xiàn)遮罩層動態(tài)效果實例

推薦度：

點擊下載本文 文檔為doc格式

標簽：動態(tài) 實現(xiàn) js

熱門焦點

javascript實現(xiàn)遮罩層動態(tài)效果實例

javascript實現(xiàn)遮罩層動態(tài)效果實例

javascript實現(xiàn)遮罩層動態(tài)效果實例

最新推薦

猜你喜歡

熱門推薦