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

更新時間：2019年05月14日 09:18:56 作者：FutureLilian

這篇文章主要介紹了javascript實現遮罩層動態(tài)效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

大家在網頁上注冊登錄的時候，經常會看見彈出的遮罩層。

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

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

以下是html界面:

<body>
<!-- 主界面 -->
<div class="main">
  <div onclick="show()">登錄</div>
</div>
 
  <!-- 設置遮罩層的div -->
<div id="shade"></div>
  <!-- 設置登錄框 -->
<div id="loginBox">
  <div onclick="close()">關閉</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)設置遮罩層的寬高與屏幕可見寬高一致，實現被遮罩頁面的全覆蓋
		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";
}
</script>

以上就是啦~

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

您可能感興趣的文章: