亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例

 更新時(shí)間:2019年05月14日 09:18:56   作者:FutureLilian  
這篇文章主要介紹了javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

大家在網(wǎng)頁(yè)上注冊(cè)登錄的時(shí)候,經(jīng)常會(huì)看見(jiàn)彈出的遮罩層。

我這里實(shí)現(xiàn)的效果是:點(diǎn)擊按鈕彈出遮罩層,遮罩層下的內(nèi)容不可選,并且登錄框隨著鼠標(biāo)滾輪的下滑,動(dòng)態(tài)的浮動(dòng)到頁(yè)面某個(gè)位置,點(diǎn)擊關(guān)閉按鈕關(guān)閉遮罩層。

這是鼠標(biāo)滾動(dòng)下滑到頁(yè)面中間某部分時(shí)畫(huà)面。雖然界面簡(jiǎ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;//絕對(duì)定位在頁(yè)面左上角
  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(){
		//動(dòng)態(tài)設(shè)置遮罩層的寬高與屏幕可見(jiàn)寬高一致,實(shí)現(xiàn)被遮罩頁(yè)面的全覆蓋
		document.getElementById("shade").style.width=document.body.clientWidth+"px";
		document.getElementById("shade").style.height=document.body.clientHeight+"px";
		
		//兼容谷歌  和 ie/firefox不同瀏覽器,獲取滾動(dòng)條到瀏覽器頂部的位置
		var h=document.body.scrollTop + document.documentElement.scrollTop;
		//用定時(shí)器實(shí)現(xiàn)下滑頁(yè)面時(shí),登錄框延遲從頂部下滑到指定位置  
		setTimeout(function(){
			  //設(shè)置登錄框始終在界面距離頂部260px的位置,因?yàn)閟tyle.top獲取的值是數(shù)值,不帶單位,所以在表達(dá)式最后人為添加單位
			  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實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論