欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

移動端手指操控左右滑動的菜單

 更新時間：2019年09月08日 11:52:34   作者：徐同保  
這篇文章主要為大家詳細介紹了移動端手指操控左右滑動的菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了移動端手指操控左右滑動菜單的具體代碼，供大家參考，具體內(nèi)容如下

<!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">國創(chuàng)</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();
   //獲取當(dāng)前坐標(biāo)
   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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理

    基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理

    在很多系統(tǒng)模塊里面，我們可能都需要進行一定的數(shù)據(jù)交換處理，這樣可以很好的達到用戶操作體驗感，接下來通過本文給大家介紹基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理相關(guān)知識，非常具有參考價值，感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • Javascript驗證Visa和MasterCard信用卡號的方法

    Javascript驗證Visa和MasterCard信用卡號的方法

    這篇文章主要介紹了Javascript驗證Visa和MasterCard信用卡號的方法,涉及javascript正則驗證的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • 淺析JavaScript中的隱式類型轉(zhuǎn)換

    淺析JavaScript中的隱式類型轉(zhuǎn)換

    這篇文章主要是對JavaScript中的隱式類型轉(zhuǎn)換進行了詳細分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • js檢測判斷日期大于多少天的方法

    js檢測判斷日期大于多少天的方法

    這篇文章主要介紹了js檢測判斷日期大于多少天的方法,涉及javascript操作日期的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-05-05
  • JS 實現(xiàn) ajax 異步瀏覽器兼容問題

    JS 實現(xiàn) ajax 異步瀏覽器兼容問題

    本文通過實例代碼給大家講解了js實現(xiàn)ajax異步瀏覽器兼容問題，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
    2017-01-01
  • JavaScript如何獲取一個元素的樣式信息

    JavaScript如何獲取一個元素的樣式信息

    這篇文章主要介紹了JavaScript如何獲取一個元素的樣式信息,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • js實現(xiàn)簡單的碰壁反彈效果

    js實現(xiàn)簡單的碰壁反彈效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的碰壁反彈效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-08-08
  • JavaScript獲取當(dāng)前cpu使用率的方法

    JavaScript獲取當(dāng)前cpu使用率的方法

    這篇文章主要介紹了JavaScript獲取當(dāng)前cpu使用率的方法,涉及JavaScript針對系統(tǒng)硬件操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-12-12
  • Javascript防止圖片拉伸的自適應(yīng)處理方法

    Javascript防止圖片拉伸的自適應(yīng)處理方法

    這篇文章主要給大家介紹了關(guān)于利用Javascript防止圖片拉伸的自適應(yīng)處理方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • 微信小程序之裁剪圖片成圓形的實現(xiàn)代碼

    微信小程序之裁剪圖片成圓形的實現(xiàn)代碼

    最近在開發(fā)小程序，產(chǎn)品經(jīng)理提了一個需求，要求微信小程序換頭像，用戶剪裁圖片必須是圓形。這篇文章主要介紹了微信小程序之裁剪圖片成圓形 ,需要的朋友可以參考下
    2018-10-10

最新評論