Maison > Article > interface Web > Comment implémenter la fonction de glissement latéral

Comment implémenter la fonction de glissement latéral

一个新手original: 2017-10-08 09:32:291454parcourir

Comment implémenter la fonction de glissement latéral «`

<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:&#39;300px&#39;
                });

                //显示透明度p层
                $(".backimg").css({
                    "display":"block"
                });

                //左侧导航右滑
                $(".right-dh").animate({
                    left:&#39;0px&#39;
                });

            });


            //还原点击事件
            $(".backimg").click(function(){
                //页面整体左滑动
                $(".page").animate({
                    left:&#39;0px&#39;
                });

                //显示透明度p层隐藏
                $(".backimg").css({
                    "display":"none"
                });

                //左侧导航右滑
                $(".right-dh").animate({
                    left:&#39;-300px&#39;
                });
            });

            //栏目选择事件
            $(".dh-btn a").click(function(){

                //页面整体左滑动
                $(".page").animate({
                    left:&#39;0px&#39;
                });

                //显示透明度p层隐藏
                $(".backimg").css({
                    "display":"none"
                });

                //左侧导航右滑
                $(".right-dh").animate({
                    left:&#39;-300px&#39;
                });

            });


        });

    </script>

</head>

<body>

    <!--右侧导航-->
    <p class="right-dh">

        <!--右侧导航头像-->
        <p class="right-dh-tx">
            <img  src="img/tx.jpg" / alt="Comment implémenter la fonction de glissement latéral" >
            <span>刘德华</span>
        </p>

        <hr />

        <!--导航栏-->
        <p class="dh-btn">
            <a class="dj" href="grzl.html">
                <i class="fa fa-bars"></i>  个人资料
            </a>
            <a href="zpzs.html">
                <i class="fa fa-bank"></i>  作品展示
            </a>
            <a href="ysxz.html">
                <i class="fa fa-beer"></i>  艺术写真
            </a>
            <a href="yyjl.html">
                <i class="fa fa-bold"></i>  演绎经历
            </a>
        </p>

    </p>

    <!--左侧界面-->
    <p class="page">


        <p class="backimg"></p>

        <p class="top">
            <!--向右滑动按钮-->
            <i class="mybtn fa fa-user"></i>
        </p>

        <!--主要内容-->
        <p class="cont">
            <iframe name="content" src="shouye.html"></iframe>
        </p>
    </p>
</body>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre le problème du défilement lent dans Safari et du défilement lent des onglets horizontauxArticle suivant：Comment résoudre le problème du défilement lent dans Safari et du défilement lent des onglets horizontaux

Articles Liés

Voir plus