移动界面侧滑（框架）

lkktyz

于 2017-09-26 15:27:14 发布

阅读量253

点赞数

文章标签：界面移动框架

本文链接：https://blog.csdn.net/lkktyz/article/details/78095850

版权

移动界面侧滑

*没有js css之类的·····上传的话好麻烦
所以·····就一个框架代码啦
ps：做的是刘德华*

移动界面侧滑

<!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>

lkktyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动界面侧滑（框架）

移动界面侧滑*没有js css之类的·····上传的话好麻烦所以·····就一个框架代码啦 ps：做的是刘德华*<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, u
复制链接

扫一扫