欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现遮罩层动态效果实例

程序员文章站 2023-01-08 17:06:51
大家在网页上注册登录的时候,经常会看见弹出的遮罩层。 我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置...

大家在网页上注册登录的时候,经常会看见弹出的遮罩层。

我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层。

这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色随意,能看出效果才是最重要的哈哈哈哈。

javascript实现遮罩层动态效果实例

以下是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(){
		//动态设置遮罩层的宽高与屏幕可见宽高一致,实现被遮罩页面的全覆盖
		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实现遮罩层动态效果详解整合,希望对大家有所帮助