用jQuery实现遮罩层和元素向上滑入、向下滑出等效果

最近在自学JavaScript+jQuery+Ajax，现在开始练一练，打算做出一个很多手机软件上实现的效果，就是点击登录时出现遮罩层并且表单的向上滑入，点击取消或空白处时又向下滑出。在窗体、文档和可视区域的区别上花了一点时间，又在CSS的position属性上纠结了好久，终于搞透彻了，附上代码和注释。

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

    /**
     * 用jQuery实现遮罩层和表单元素的向上滑入和向下滑出
     * @author LiXudong <l.x.dong1992@gmail.com>
     */ 
    $(function() {

        //点击按钮触发事件
        $("#btn").click(function () {

            // 获取当前窗口的可视宽高度
            var mtop = $(window).height();
            var mwid = $(window).width();

            // 去掉表单元素的隐藏属性，并添加显示的属性
            // 将该元素距顶部的距离设为窗口的可视高度
            // 创建动画效果，使之上浮至距顶部50px处
            $("#form").removeClass().addClass("show").css({marginTop:mtop+'px'}).animate({marginTop:'50px'},"slow");

            // 将遮罩层的样式设为block，高度设为当前文档的高度，使之无法滚动
            $("#cover").css({ display:"block",height:$(window).height()});

        });

        // 点击close按钮触发关闭表单事件
        $("#close").click(function() {

            // 获得窗口可视区域高度
            var mtop = $(window).height();

            // 为表单创建动画效果，将使它滑动到与顶部相距为窗口可视区域高度，这样表单就从可视区域中消失了
              $("#form").animate({marginTop:mtop+'px'},"slow",function() {

                  // 虽然表单从可视区域中消失了，但它仍在文档的下方，将文档下移时仍可以看到它
                  // 所以这里要删除表单的可视属性，并赋予它隐藏属性
                  $(this).removeClass().addClass("noshow")
              });

              // 将遮罩层设为隐藏
              $("#cover").css("display", "none");
        });

        // 点击遮罩层触发与上面相同的事件，即点击表单外任何一处都可以关闭表单
        $("#cover").click(function() {

            var mtop = $(window).height();

              $("#form").animate({marginTop:mtop+'px'},"slow",function() {

                  $(this).removeClass().addClass("noshow")
              });

              $("#cover").css("display", "none");
        })

    });

    </script>
    
    <style type="text/css">
        #form {
            position:absolute;
            width:400px;
            margin:auto;
            top:30px;
            height:auto;
            /*表单显示的时候必须在文档的最上层*/
            z-index:100;
            background-color:green;
            border:1px #8FA4F5 solid;
            padding:1px;
            text-align: center;
        }
        .noshow {
            display:none;
        }

        .show {
            display: block;
        }

        #cover {
            background-color:#e3e3e3;
            position:absolute;
            /*遮罩层的层级必须低于form而且高于文档*/
            z-index:99;
            left:0;
            top:0;
            display:none;
            width:100%;
            height:1000px;
            opacity:0.5;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }

    </style>

</head>
<body>
    <!-- 遮罩层 -->
    <div id="cover"></div>

    <!-- 开启表单 -->
    <button id="btn">haha</button>

    <!-- 表单所在div，注释中表单即为此处 -->
    <div id="form" class="noshow">
        <form>
            <input type="text" name="title" value="">
            <textarea cols="30" rows="20"></textarea>
            <input type="submit" value="submit" />
        </form>
        <!-- 关闭表单按钮，点击表单外任何一处也可以触发此事件 -->
        <button id="close">close</button><br/><br/>
    </div>
</body>
</html>

 

 

 

posted @ 2014-03-24 20:29  vitolee  阅读(476)  评论(0)    收藏  举报