视频问题的延伸

首页课程实战体系课手记专栏慕课教程

视频问题的延伸

来源：3-3 jquery左侧导航菜单效果书写

人生的起源

2020-10-03 02:20:04

如果想把该节视频中点击按钮出现或隐藏左侧导航，改为左右滑动outwrap让左侧导航出现或隐藏，该怎么写？

写回答

1回答

樱桃小胖子

2020-10-07

同学你好，获取鼠标初始位置，移动位置，计算差值，然后进行判断是向左侧滑动还是向右侧滑动，向右侧滑动的时候显示菜单栏。向左侧滑动的时候隐藏菜单栏即可，参考如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
    <title>慕课网</title>
    <link rel="stylesheet" href="css/albb.css">
    <link rel="stylesheet" href="css/demo.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <!-- 代码部分begin -->
    <section class="wraper-page">
        <header class="header">
            <span class="btn-slide-bar"></span>
            <h1 class="page-title">header</h1>
        </header>
        <p>请使用你的移动网页浏览本页面</p>
        <p>点击左上角按钮试试效果</p>
        <footer class="footer">footer</footer>
    </section>
    <section class="slide-bar">
        <ul>
            <li>首页</li>
            <li>菜单导航</li>
            <li>jQuery特效</li>
            <li>CSS3特效</li>
            <li>tab标签</li>
        </ul>
    </section>
    <script>
    $(".wraper-page").on("touchstart", function(e) {
        // 判断默认行为是否可以被禁用
        if (e.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!e.defaultPrevented) {
                e.preventDefault();
            }
        }
        // 初始位置判断
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $(".wraper-page").on("touchend", function(e) {
        // 判断默认行为是否可以被禁用
        if (e.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!e.defaultPrevented) {
                e.preventDefault();
            }
        }
        // 移动位置判断
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
        var swiperFun = {
            init: function() {
                var _this = this;
                if (X < 0) { //往左侧滑页面
                    console.log("往左侧滑页面")
                    _this._swipeRight();
                } else if (X > 0) { //往右侧滑页面
                    console.log("往右侧滑页面")
                   _this._swipeLeft();
                }
            },
            _swipeLeft: function() {
                $('.slide-bar').animate({ 'width': '50%' }, "50");
                $('.wraper-page').animate({ 'margin-left': '50%' }, "50");
                $('.btn-slide-bar').addClass('active');
            },
            _swipeRight: function() {
                $('.slide-bar').animate({ 'width': '0' }, "50");
                $('.wraper-page').animate({ 'margin-left': '0' }, "50");
                $('.btn-slide-bar').removeClass('active');
            }
        }
        swiperFun.init();
    });
    </script>
    <!-- 代码部分end -->
</body>
</html>

css代码：

.header,
.footer {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    height: 44px;
    line-height: 44px;
    z-index: 1;
}
.header {
    border-bottom: 1px solid #e73068;
    top: 0;
}
.footer {
    border-top: 1px solid #e73068;
    bottom: 0;
}
.header .btn-slide-bar {
    width: 44px;
    height: 44px;
    float: left;
    cursor: pointer;
    line-height: 2.8;
}
.header .btn-slide-bar::before {
    content: "";
    width: 20px;
    height: 2px;
    background-color: #999;
    display: inline-block;
    box-shadow: 0 7px 0 #999, 0 -7px 0 #999;
}
.wraper-page {
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    left: 0;
    overflow: hidden;
    padding: 44px 0;
}
.slide-bar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    background-color: #333;
    width: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}
.slide-bar li {
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    color: #fff;
    border-bottom: 1px solid #222;
}

测试的时候，将demo.css替换成你的reset.css即可，另外，滑动事件一般用于移动端，因此，测试的时候需要在模拟的移动端设备上测试，如：

祝学习愉快！

0 学习 · 4826 问题

查看课程

相似问题

左侧导航的偏移问题

回答 1

视频的3分08秒提到的面试题，关于这三种方法，老师可以具体讲一下吗

回答 1

ul的背景颜色为什么会在点击按钮的时候消失?如果transition写在js中,要怎么写兼容?

回答 1

关于JSON.parse()的问题

回答 2

打开慕课网App查看更多内容