master

分支 (1)

管理

管理

master

aboutjs
/
侧滑导航和关闭动画.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>侧滑导航和关闭动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style type="text/css">
    *{margin:0;padding:0}
    body{transition:transform .3s ease}
    body.menu_open{transform:translate(-130px,0);height:100%;overflow:hidden}
    .menu{display:block;width:130px;height:2000px;background:#3c3c44;padding-top:62px;position:fixed;left:100%;top:0;}
    .menu_black{position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.1);z-index:9999;display:none;}
    body.menu_open .menu_black{display:block;}

    .head{width:100%;position:relative}
    .hamburger{position:absolute;top:0;right:10px;}
    .hamburger .line{width:50px;height:5px;background-color:#000;display:block;margin:8px auto;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
    .hamburger:hover{cursor:pointer}
    .hamburger.active .line:nth-child(2){opacity:0}
    .hamburger.active .line:nth-child(1){-webkit-transform:translateY(13px) rotate(45deg);-ms-transform:translateY(13px) rotate(45deg);-o-transform:translateY(13px) rotate(45deg);transform:translateY(13px) rotate(45deg)}
    .hamburger.active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(-45deg);-ms-transform:translateY(-13px) rotate(-45deg);-o-transform:translateY(-13px) rotate(-45deg);transform:translateY(-13px) rotate(-45deg)}

    </style>
</head>

<body>
    <div class="head">
        <div class="three">
            <div class="hamburger">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
    </div>

    <div class="menu_black"></div>


    <div class="menu">

    </div>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">

    	$('.hamburger').on('click',function(){
    		if($(this).hasClass('active')){
    			$(this).removeClass('active');
    		}else{
    			$(this).addClass('active');
                $('body').addClass('menu_open')


                var displacement = {}; //位移
                var remove_width = 50;
                //判断滑动方向
                var touchDirection = function(x1, x2, y1, y2) {
                    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
                };

                //
                function startFun(e){
                    // e.preventDefault();
                    displacement.x1 = e.targetTouches[0].clientX;
                    displacement.y1 = e.targetTouches[0].clientY;
                }

                //
                function endFun(e){
                    // e.preventDefault();
                    displacement.x2 = e.changedTouches[0].clientX;
                    displacement.y2 = e.changedTouches[0].clientY;
                    var direction = touchDirection(displacement.x1, displacement.x2, displacement.y1, displacement.y2);
                    if (direction == "Left" && Math.abs(displacement.x1 - displacement.x2) > remove_width) {
                        // $(this).addClass('edit-true');

                    } else if (direction == "Right" && Math.abs(displacement.x1 - displacement.x2) > remove_width) {
                        $(this).removeClass('menu_open');
                        $('.hamburger').removeClass('active');
                        console.log(displacement);

                        document.body.removeEventListener('touchstart',startFun);
                        document.body.removeEventListener('touchend',endFun);

                    }
                }

                //左滑删除
                document.body.addEventListener('touchstart', startFun);

                document.body.addEventListener('touchend', endFun);

    		}
    	})


        $('.menu_black').on('click',function(){
            $('.hamburger').removeClass('active');
            $('body').removeClass('menu_open');
        })
    </script>
</body>

</html>