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

發(fā)布時間：2020-08-27 21:08:38 來源：腳本之家閱讀：206 作者：FutureLilian 欄目：web開發(fā)

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

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

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

以下是html界面:

<body>
<!-- 主界面 -->
<div class="main">
  <div onclick="show()">登錄</div>
</div>
 
  <!-- 設(shè)置遮罩層的div -->
<div id="shade"></div>
  <!-- 設(shè)置登錄框 -->
<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)設(shè)置遮罩層的寬高與屏幕可見寬高一致，實現(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(){
			  //設(shè)置登錄框始終在界面距離頂部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>

以上就是啦~

以上所述是小編給大家介紹的javascript實現(xiàn)遮罩層動態(tài)效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽