视频问题的延伸
来源：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
相似问题