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


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替换URL中的参数值示例代码
Jan 27 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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 ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP发送短信代码分享
2015/08/11 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python实现简单点对点(p2p)聊天
2017/09/13 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
委托书怎样写
2014/08/30 职场文书
停水通知
2015/04/16 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书