cari

Rumah >hujung hadapan web >tutorial js >如何实现侧滑功能

如何实现侧滑功能

一个新手
一个新手asal
2017-10-08 09:32:291505semak imbas

这里写图片描述“` 

<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" />
            <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>

Atas ialah kandungan terperinci 如何实现侧滑功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何解决Safari滚动慢，横向选项卡滚动缓慢的问题Artikel seterusnya：JSP中JSTL提供的函数标签EL表达式操作字符串的方法

Artikel berkaitan

Lihat lagi