点击动画方式弹出带有灰色半透明背景div层

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击按钮弹出一个带有灰色半透明北京的div层效果。

并且弹出过程具有动画效果,从右上角飞入的感觉,代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>前端教程网</title> 
<style>
*{
  margin:0;
  padding:0;
  list-style-type:none;
}
a{text-decoration:none;}
.showdiv{
  color:#fff;
  padding:8px 15px;
  background:#09F;
  text-align:center;
  display:block;
  width:150px;
  margin:100px auto;
}
.showbox{
  width:0px;
  height:0px;
  display:none;
  position:absolute;
  right:0;
  top:0;
  z-index:100;
  border:1px #8FA4F5 solid;
  padding:1px;
  background:#fff;
}
.showbox h2{
  height:25px;
  font-size:14px;
  background-color:#3366cc;
  position:relative;
  padding-left:10px;
  line-height:25px;
  color:#fff;
}
.showbox h2 a{
  position:absolute;
  right:5px;
  top:0;
  font-size:12px;
  color:#fff;
}
.showbox .mainlist{padding:10px;}
.showbox .mainlist p{
  font:normal 14px/2 'microsoft yahei';
  text-indent:2em;
  color:#333;
  padding-top:5px;
}
#zhezhao{
  background-color:#666;
  position:absolute;
  z-index:99;
  left:0;
  top:0;
  display:none;
  width:100%;
  height:100%;
  opacity:0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(".showdiv").click(function () {
    var box = 300;
    var th = $(window).scrollTop() + $(window).height() / 1.6 - box;
    var h = document.body.clientHeight;
    var rw = $(window).width() / 2 - box;
    $(".showbox").animate({
      top: th,
      opacity: 'show',
      width: 600,
      height: 340,
      right: rw
    }, 500);
    $("#zhezhao").css({
      display: "block",
      height: $(document).height()
    });
    return false;
  });
  $(".showbox .close").click(function () {
    $(this).parents(".showbox").animate({
      top: 0,
      opacity: 'hide',
      width: 0,
      height: 0,
      right: 0
    }, 500);
    $("#zhezhao").css("display", "none");
  });
});
</script>
</head>
<body>
  <a class="showdiv" href="#">点击我弹出浮层</a>
  <div class="showbox">
    <h2>前端教程网<a class="close" href="#">关闭</a></h2>
    <div class="mainlist">
      <p></p>
    </div>
  </div> 
  <div id="zhezhao"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$(".showdiv").click(function () {}),为class属性值为showdiv的元素注册click事件处理函数。

(3).var box = 300,声明一个变量并赋值为300。

(4).var th = $(window).scrollTop() + $(window).height() / 1.6 - box,这个代码是计算出弹出层top值。 $(window).scrollTop()获取的是窗口中的内容向上滚动的尺寸,$(window).height() 获取的是浏览器客户区的高度。这个top值没有特别的讲究,就是随意设置的,不要太难看就可以。

(5).var h = document.body.clientHeight,获取body的高度。

(6).var rw = $(window).width() / 2 - box,获取弹出层的left属性值,因为弹出层的宽度是600,而box值是300,所以也就是将其设置为水平居中显示。

(7).$(".showbox").animate({

  top: th,

  opacity: 'show',

  width: 600,

  height: 340,

  right: rw

}, 500)

以动画的方式展现弹出层,因为弹出层默认是隐藏并且位于页面的左上角,所以此代码就实现了让它从左上角飞入的效果。

(8).$("#zhezhao").css({

  display: "block",

  height: $(document).height()

}),显示遮罩层。

(9).$(".showbox .close").click(function () {

  $(this).parents(".showbox").animate({

    top: 0,

    opacity: 'hide',

    width: 0,

    height: 0,

    right: 0

  }, 500);

  $("#zhezhao").css("display", "none");

}),原理一回事,和上面做相反的工作。

二.相关阅读:

(1).scrollTop()可以参阅jQuery scrollTop()一章节。

(2).clientHeight可以参阅clientHeight一章节。

(3).animate()可以参阅jQuery animate()一章节。

(4).css()可以参阅jQuery css()方法一章节。

(5).parents()可以参阅jQuery parents()一章节。

回复

我来回复
  • 暂无回复内容