侧滑

来源：互联网发布：java相关文献编辑：程序博客网时间：2024/05/04 14:00
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title></title>        <base target="content" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <link rel="shortcut icon" href="favicon.ico">         <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">        <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">        <style>            body{                margin: 0;                padding: 0;                overflow: hidden;            }            .page{                position: absolute;                /*left: 300px;*/                width: 100%;                height: 100%;                background-color: lavender;            }            .top{                position: fixed;                width: 100%;                height: 60px;                background-color: royalblue;                z-index: 500;            }            .mybtn{                margin-top: 15px;                margin-left: 15px;                color: #FFFFFF;                font-size: 28px;            }            .mybtn:hover{                cursor: pointer;            }            .backimg{                position: absolute;                width: 100%;                height: 100%;                z-index: 1000;                background-color: black;                opacity: 0.3;                display: none;            }            .right-dh{                border: 1px solid #000000;                position: absolute;                left: -300px;                background-color: black;                width: 300px;                height: 100%;                z-index: -10;            }            .right-dh-tx{                text-align: center;            }            .right-dh-tx img{                display: block;                width: 110px;                border-radius: 50%;                border: 3px solid #FFFFFF;                margin: 100px auto 30px;            }            .right-dh-tx span{                color: #FFFFFF;            }            .cont iframe{                position: absolute;                top: 65px;                width: 100%;                height: 100%;                border: 0px;                /*background-color: brown;*/            }            .dh-btn{                margin-top: 50px;                /*border-top: 1px solid gray;*/            }            .dh-btn a{                display: block;                color: #FFFFFF;                text-decoration: none;                /*border-bottom: 1px solid gray;*/                height: 60px;                line-height: 60px;                text-indent: 20px;            }            hr{                width: 200px;                color: gainsboro;                opacity: 0.3;                margin-top: 50px;            }        </style>        <script>            $(document).ready(function(){                //侧滑按钮点击事件                $(".mybtn").click(function(){                    //页面整体侧滑                    $(".page").animate({                        left:'300px'                    });                    //显示透明度div层                    $(".backimg").css({                        "display":"block"                    });                    //左侧导航右滑                    $(".right-dh").animate({                        left:'0px'                    });                });                //还原点击事件                $(".backimg").click(function(){                    //页面整体左滑动                    $(".page").animate({                        left:'0px'                    });                    //显示透明度div层隐藏                    $(".backimg").css({                        "display":"none"                    });                    //左侧导航右滑                    $(".right-dh").animate({                        left:'-300px'                    });                });                //栏目选择事件                $(".dh-btn a").click(function(){                    //页面整体左滑动                    $(".page").animate({                        left:'0px'                    });                    //显示透明度div层隐藏                    $(".backimg").css({                        "display":"none"                    });                    //左侧导航右滑                    $(".right-dh").animate({                        left:'-300px'                    });                });            });        </script>    </head>    <body>        <!--右侧导航-->        <div class="right-dh">            <!--右侧导航头像-->            <div class="right-dh-tx">                <img src="img/tx.jpg" />                <span>刘德华</span>            </div>            <hr />            <!--导航栏-->            <div class="dh-btn">                <a class="dj" href="grzl.html">                    <i class="fa fa-bars"></i>&nbsp;&nbsp;个人资料                </a>                <a href="zpzs.html">                    <i class="fa fa-bank"></i>&nbsp;&nbsp;作品展示                </a>                <a href="ysxz.html">                    <i class="fa fa-beer"></i>&nbsp;&nbsp;艺术写真                </a>                <a href="yyjl.html">                    <i class="fa fa-bold"></i>&nbsp;&nbsp;演绎经历                </a>            </div>        </div>        <!--左侧界面-->        <div class="page">            <div class="backimg"></div>            <div class="top">                <!--向右滑动按钮-->                <i class="mybtn fa fa-user"></i>            </div>            <!--主要内容-->            <div class="cont">                <iframe name="content" src="shouye.html"></iframe>            </div>        </div>    </body></html>
阅读全文
0 0