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


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中的排序算法代码
Feb 22 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
js编写三级联动简单案例
Dec 21 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
简单使用Python自动生成文章
2014/12/25 Python
深入浅析Python字符编码
2015/11/12 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python中is和==的区别详解
2018/11/15 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
pandas的resample重采样的使用
2020/04/24 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python如何使用input函数获取输入
2020/08/06 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
研究生自荐信
2013/10/09 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
语文教育专业求职信
2014/06/28 职场文书
个人四风对照检查材料
2014/09/26 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis