真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單-創(chuàng)新互聯(lián)

這篇文章主要介紹HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比尼開(kāi)遠(yuǎn)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式尼開(kāi)遠(yuǎn)網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋尼開(kāi)遠(yuǎn)地區(qū)。費(fèi)用合理售后完善,十年實(shí)體公司更值得信賴(lài)。

具體內(nèi)容如下

  
  
  
    
  移動(dòng)端手指操控左右滑動(dòng)的菜單 
   
  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;
  }
    
  
 

 
   
     全站    
   
        動(dòng)畫(huà)    
         番劇    
        國(guó)創(chuàng)              音樂(lè)             舞蹈              科技             游戲              娛樂(lè)             電影              電視劇             紀(jì)錄片          
           二級(jí)菜單1    
        二級(jí)菜單2              二級(jí)菜單3             二級(jí)菜單4              二級(jí)菜單5             二級(jí)菜單6              二級(jí)菜單7             二級(jí)菜單8              二級(jí)菜單9             二級(jí)菜單10              二級(jí)菜單11             二級(jí)菜單12                          二級(jí)菜單s1             二級(jí)菜單s2                   $(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;      //確定本次拖動(dòng)transform的初始值      var transformStr = menuList.style.transform;      transformStr = transformStr.substring(11);      var index = transformStr.lastIndexOf("p");      transformStr = transformStr.substring(0, index);      transformX = parseInt(transformStr);      //確定本次拖動(dòng)的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();  }(); });   

HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單

HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單

HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單

以上是“HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


新聞名稱(chēng):HTML如何實(shí)現(xiàn)移動(dòng)端手指操控左右滑動(dòng)的菜單-創(chuàng)新互聯(lián)
文章URL:http://weahome.cn/article/cocpos.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部