移动端手指操控左右滑动的菜单
程序员文章站
2023-11-03 14:25:45
本文实例为大家分享了移动端手指操控左右滑动菜单的具体代码,供大家参考,具体内容如下
本文实例为大家分享了移动端手指操控左右滑动菜单的具体代码,供大家参考,具体内容如下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端手指操控左右滑动的菜单</title> <style type="text/css"> body {margin:0;} .menu-wrap { width: 100%; height: 50px; overflow: hidden; } .menu-wrap-layer2 { width: 100%; height: 50px; overflow: hidden; } .menu-list { display: inline-block; white-space: nowrap; transition-duration: 0ms; transform: translatex(0px); } .menu-list-item { display: inline-block; } .menu-list-item span { display: inline-block; width: 100px; margin: 0 3px; text-align: center; } </style> </head> <body> <div id="menu-wrap" class="menu-wrap"> <div class="menu-list js-menu-list"> <div class="menu-list-item"> <span data-index="0">全站</span> </div> <div class="menu-list-item"> <span data-index="1">动画</span> </div> <div class="menu-list-item"> <span data-index="2">番剧</span> </div> <div class="menu-list-item"> <span data-index="3">国创</span> </div> <div class="menu-list-item"> <span data-index="4">音乐</span> </div> <div class="menu-list-item"> <span>舞蹈</span> </div> <div class="menu-list-item"> <span>科技</span> </div> <div class="menu-list-item"> <span>游戏</span> </div> <div class="menu-list-item"> <span>娱乐</span> </div> <div class="menu-list-item"> <span>电影</span> </div> <div class="menu-list-item"> <span>电视剧</span> </div> <div class="menu-list-item"> <span>纪录片</span> </div> </div> </div> <div> <div class="menu-wrap-layer2 js-menu-wrap-layer2 js-menu-wrap0" style="display: block;"> <div class="menu-list js-menu-list"> <div class="menu-list-item"> <span>二级菜单1</span> </div> <div class="menu-list-item"> <span>二级菜单2</span> </div> <div class="menu-list-item"> <span>二级菜单3</span> </div> <div class="menu-list-item"> <span>二级菜单4</span> </div> <div class="menu-list-item"> <span>二级菜单5</span> </div> <div class="menu-list-item"> <span>二级菜单6</span> </div> <div class="menu-list-item"> <span>二级菜单7</span> </div> <div class="menu-list-item"> <span>二级菜单8</span> </div> <div class="menu-list-item"> <span>二级菜单9</span> </div> <div class="menu-list-item"> <span>二级菜单10</span> </div> <div class="menu-list-item"> <span>二级菜单11</span> </div> <div class="menu-list-item"> <span>二级菜单12</span> </div> </div> </div> <div class="menu-wrap-layer2 js-menu-wrap-layer2 js-menu-wrap1" style="display: none;"> <div class="menu-list js-menu-list"> <div class="menu-list-item"> <span>二级菜单s1</span> </div> <div class="menu-list-item"> <span>二级菜单s2</span> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $(function() { var menu = function(wrap, menulist, menuitems) { var devicewidth = $(window).width(); var positionx = 0; var menulistpositionx1 = wrap.offset().left; var menulistpositionx2 = menulistpositionx1 + wrap.width(); $(menulist).attr("style","transition-duration: 0ms;transform: translatex(0px);"); menulist.addeventlistener('touchstart',function(event){ if(event.targettouches.length == 1){ var touch = event.targettouches[0]; positionx = touch.pagex; //确定本次拖动transform的初始值 var transformstr = menulist.style.transform; transformstr = transformstr.substring(11); var index = transformstr.lastindexof("p"); transformstr = transformstr.substring(0, index); transformx = parseint(transformstr); //确定本次拖动的div宽度值 var widthstr = menulist.style.width; thiswidth = parseint(widthstr.substring(0,widthstr.lastindexof("p"))); } }, false); menulist.addeventlistener('touchmove', function(event) { //阻止其他事件 event.preventdefault(); //获取当前坐标 if(event.targettouches.length == 1){ var touch = event.targettouches[0]; menulist.style.transform = 'translatex('+(transformx+touch.pagex-positionx)+'px)'; $(menulist).css("width",thiswidth+positionx-touch.pagex); } }, false); menulist.addeventlistener('touchend', function(event) { var menuitem1 = menuitems[0]; var menuitem1left = $(menuitem1).offset().left; var menuitem2 = menuitems[menuitems.length-1]; var menuitempositionx = $(menuitem2).offset().left+$(menuitem2).width(); var firsttolast = menuitempositionx - menuitem1left; if (menuitem1left > menulistpositionx1 || firsttolast < devicewidth) { menulist.style.transform = 'translatex('+(menulistpositionx1)+'px)'; } if(menuitempositionx < menulistpositionx2 && menuitem1left < 0 && firsttolast > devicewidth) { var mywidth = $(menulist).width() - devicewidth; menulist.style.transform = 'translatex('+(0-mywidth)+'px)'; } }, false); } var event = function() { $('#menu-wrap .js-menu-list span').click(function () { console.log($(this).attr('data-index')); var activemenu = $('.js-menu-wrap' + $(this).attr('data-index')); activemenu.siblings().hide(); activemenu.show(); }); } var init = function() { var menuwrap = $('#menu-wrap'); var menulist = $("#menu-wrap .js-menu-list")[0]; var menulistitems = $("#menu-wrap .menu-list-item"); menu(menuwrap, menulist, menulistitems); var menuwraplayer2 = $('.js-menu-wrap-layer2'); var helper = function (tempwrap, tempmenulist, tempmenulistitems) { var tempfun = function() { menu(tempwrap, tempmenulist, tempmenulistitems); }(); } for (var i = 0; i < menuwraplayer2.length; i++) { var tempwrap = $(menuwraplayer2[i]); var tempmenulist = $(menuwraplayer2[i]).find('.js-menu-list')[0]; var tempmenulistitems = $(menuwraplayer2[i]).find('.menu-list-item'); helper(tempwrap, tempmenulist, tempmenulistitems); } event(); }(); }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。