移动端手指操控左右滑动的菜单


Posted in Javascript onSeptember 08, 2019

本文实例为大家分享了移动端手指操控左右滑动菜单的具体代码,供大家参考,具体内容如下

<!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>

移动端手指操控左右滑动的菜单

移动端手指操控左右滑动的菜单

移动端手指操控左右滑动的菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 #Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 #Javascript
swiper4实现移动端导航切换
Oct 16 #Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
You might like
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
js实现登录验证码
2016/12/22 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python类的用法实例浅析
2015/05/27 Python
python线程池threadpool实现篇
2018/04/27 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python实现批量注册网站用户的示例
2019/02/22 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
个人担保书范文
2014/05/20 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2014年电教工作总结
2014/12/19 职场文书
村干部任职承诺书
2015/01/21 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript