jq实现侧滑导航

最新推荐文章于 2022-10-23 00:27:33 发布

木易66丶

最新推荐文章于 2022-10-23 00:27:33 发布

阅读量505

点赞数

分类专栏：前端js

本文链接：https://blog.csdn.net/q_qman/article/details/89842366

版权

前端js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
		.mask {
		    background-color: #001d40;
		    position: fixed;
		    z-index: 99;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    opacity: 0;
		    display: none;
		}

		.mobilenav {
		    width: 260px;
		    position: fixed;
		    top: 0;
		    right: -260px;
		    bottom: 0;
		    background: #fafafa;
		    z-index: 110;
		    overflow-y: auto;
		}

		.phonenavbox {
		    background-color: #0073ff;
		    color: #fff;
		    padding: 50px 16px 30px 16px;
		}

		.ionc-center img {
		    width: 60px;
		    height: 60px;
		    border-radius: 50%;
		}

		.phonenav-text {
		    margin-top: 16px;
		}

		.phonenav-text p {
		    margin: 0;
		    line-height: 30px;
		    font-size: 12px;
		}

		.phonenav-text p.name {
		    font-size: 14px;
		}

		.phonenav-text .fr button {
		    background: #0073ff;
		    color: #fff;
		    border: 1px solid #fff;
		    border-radius: 24px;
		    padding: 4px 16px;
		    margin-top: 12px;
		}

		.mobilenav-list {
		    padding: 24px 0 24px 12px;
		    border-bottom: 1px solid #d6d6d6;
		}

		.mobilenav-list ul li,
		.nav-mygame ul li {
		    line-height: 40px;
		}

		.mobilenav-list ul li span,
		.nav-mygame ul li span {
		    color: #666;
		}
	</style>
</head>
<body>
	<button class="mobilenavbtn">点击这里</button>
	<div>
    <div class="mask"></div>
    <div class="mobilenav">
        <div class="phonenavbox">
            <div class="oh">
                <div class="ionc-center fl">
                    <img src="__PUBLIC__/img/center_icon1.png" alt="">
                </div>
                <div class="toindex-nav fr">
                    <img src="__PUBLIC__/img/torightnsv.png" alt="">
                </div>
            </div>
            <div class="oh phonenav-text">
                <div class="fl">
                    <p class="name">侧滑导航</p>
                    <p>lively001@qq.com</p>
                </div>
                <div class="fr">
                    <button>退出</button>
                </div>
            </div>
        </div>
        <div class="mobilenav-list">
            <ul>
                <li>
                    <span class="icon iconfont icon-qian f18"></span>
                    <span class="pl16">资产</span>
                </li>
                <li>
                	<a href="#">
                		<span class="icon iconfont icon-jilu f18"></span>
                    	<span class="pl16">游戏充值记录</span>
                	</a>
                </li>
                <li>
                	<a href="#">
	                    <span class="icon iconfont icon-shezhi f18"></span>
	                    <span class="pl16">修改密码</span>
                    </a>
                </li>
            </ul>
        </div>
        <div>
            <div class="nav-mygame">
                <ul>
                    <li>
                        <span class="icon iconfont icon-youxi f18"></span>
                        <span class="pl16">我的游戏</span>
                    </li>
                </ul>
            </div>
            <div class="navgame-list">
                <ul>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                    <li>
                        <img src="__PUBLIC__/img/index_05.jpg" alt="">
                        <p>游戏名称</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$('.mobilenavbtn').click(function() {
            navtaggleShow("hidden", "block", 0.8, '0');
        });

        $(".mask,.toindex-nav").click(function() {
            navtaggleShow("auto", "none", 0, '-260px');
        });

        $("body").on("touchstart", function(e) {　　　　
            e.preventDefault();　　　　
            startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;　　
        });　　

        $("body").on("touchmove", function(e) {　　　　
            e.preventDefault();　　　　
            moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY;　　　　　　
            if (Math.abs(X) > Math.abs(Y) && X > 100) {　　　　
                navtaggleShow("auto", "none", 0, '-260px');　　
            }　　　　
            else if (Math.abs(X) > Math.abs(Y) && X < -100) {　　
                navtaggleShow("hidden", "block", 0.8, '0');　
            }
        });

        function navtaggleShow(varover, vardisplay, varopacity, rightnum) {
            $(".mobilenav,.mask").stop(true);
            $('body').css("overflow-y", varover);
            $(".mask").css("display", vardisplay).animate({
                opacity: varopacity
            }, 500);
            $(".mobilenav").animate({
                right: rightnum
            }, 500);
        };
</script>
</html>

效果如下：

木易66丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq实现侧滑导航

代码：<!DOCTYPE html><html><head> <title>测试</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li...
复制链接

扫一扫