上方和下方滑入滑出工具条代码示例

<html>

    <head>

        <title></title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <style type="text/css">

            body {

                margin: 0px;

            }

            .toolBar {

                width:100%;

                position: fixed;

                z-index: 1;

                display: none;

            }

            .toolBar.toolBarTop {

                background-color:red;

                height: 40px;

                top: -40px;

            }

            .toolBar.toolBarBottom {

                background-color:yellow;

                height: 50px;

                bottom: -50px;

            }

        </style>

        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

        <script type="text/javascript">

            $(function () {

                for (var i = 0; i < 10; i++) {

                    $("#testText1").html($("#testText1").html() + "<br/>");

                }

                for (var i = 0; i < 50; i++) {

                    $("#testText2").html($("#testText2").html() +  "Line " + i + "<br/>");

                }

            });

            function ShowToolBar() {

                var speed = 250;

                $(".toolBarTop").show().animate({ top: "0px" }, speed);

                $(".toolBarBottom").show().animate({ bottom: "0px" }, speed);

            }

            function HideToolBar() {

                var speed = 250;

                $(".toolBarTop").animate({ top: "-" + $(".toolBarTop").height() + "px" }, speed, null, function () { $(".toolBarTop").hide(); });

                $(".toolBarBottom").animate({ bottom: "-" + $(".toolBarBottom").height() + "px" }, speed, null, function () { $(".toolBarBottom").hide(); });

            }

        </script>

    </head>

    <body>

        <div class="toolBar toolBarTop">AAA<br/>BBB</div>

        <div class="content">

            <div id="testText1"></div>

            <input type="button" id="btnShow" value="Show" onclick="ShowToolBar();" />

            <input type="button" id="btnHide" value="Hide" onclick="HideToolBar();" />

            <div id="testText2"></div>

        </div>

        <div class="toolBar toolBarBottom">CCC<br/>DDD</div>

    </body>

</html>

  

你可能感兴趣的:(代码)