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

来源：懂视网责编：小采时间：2020-11-27 21:57:09

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

javascript实现遮罩层动态效果实例:大家在网页上注册登录的时候，经常会看见弹出的遮罩层。我这里实现的效果是：点击按钮弹出遮罩层，遮罩层下的内容不可选，并且登录框随着鼠标滚轮的下滑，动态的浮动到页面某个位置，点击关闭按钮关闭遮罩层。这是鼠标滚动下滑到页面中间某部分时画面。虽然

推荐度：

点击下载本文 文档为doc格式

导读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实现遮罩层动态效果实例

推荐度：

点击下载本文 文档为doc格式

标签：动态实现 js

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐