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

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

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

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

以下是html界面:

  登录

 
  

  

  关闭

 

样式表：

*{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代码部分：

以上就是啦~

以上所述是小编给大家介绍的javascript实现遮罩层动态效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！