水平滾動觸摸菜單？

我正在建設一個移動網站，客戶想要一個頂部的菜單欄。菜單很寬，所以他希望通過左右拖動來水平滾動菜單。 app.ft.com有類似的功能（雖然你必須在iPhone上查看它才能看到它的工作）水平滾動觸摸菜單？

有誰知道可以實現這一點的jQuery/jqTouch腳本？我試過scrollTouch，但是它只滾動整個頁面，而不僅僅是一個菜單。

來源

2011-08-03 Typhoon101

看看這個

http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

來源

2011-08-03 19:54:17 ShankarSangoli

感謝您的鏈接。它看起來是一個很好的腳本，但不知道我能否使用它作爲無序列表構建菜單。我似乎無法讓它滾動到下一個項目 - 在這種情況下的圖像。我可能是錯的，但我不會說德語，所以不能看看是否有任何標記說明 – Typhoon101

任何人都可以提供幫助嗎？ – Typhoon101

你可以發佈一些你已經嘗試過的標記和代碼，我可以幫你。 – ShankarSangoli

我寫了與jQuery Mobile的圖像，你可以通過拖動它向左或向右移動設備上滾動簡單的橫向導航欄。這個例子很粗糙，但它會給你一個總體思路。標記是如下：

CSS：

<style type="text/css"> 
#navBar 
{ 
    white-space: nowrap; 
    height: 55px; 
    width: 100%; 
    position: relative; 
} 
</style>

HTML標記：

<div id="navBar"> 
    <div style="left: 0%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav1" /> 
     <br /> 
     <span style="font-size: 80%">Nav1</span> 
    </div> 
    <div style="left: 40%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav2" /> 
     <br /> 
     <span style="font-size: 80%">Nav2</span> 
    </div> 
    <div style="left: 80%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav3" /> 
     <br /> 
     <span style="font-size: 80%">Nav3</span> 
    </div> 
    <div style="left: 120%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav4" /> 
     <br /> 
     <span style="font-size: 80%">Nav4</span> 
    </div> 
    <div style="left: 160%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav5" /> 
     <br /> 
     <span style="font-size: 80%">Nav5</span> 
    </div> 
    <div style="left: 200%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav6" /> 
     <br /> 
     <span style="font-size: 80%">Nav6</span> 
    </div> 
</div>

的JavaScript：

<script type="text/javascript" language="javascript"> 
    var bMouseDown = false; 
    var bMouseUp = true; 
    var iStartPixelsX = 0; 
    var iCurrentNavbarPixelsX = 0; 
    var changePixels = 0; 
    var leftMostOffsetPixels = 0; 

    function funcMoveNavBar(pixels) { 
     $("#navBar").attr("style", "left: " + pixels + "px;"); 
    } 

    var onOrientationChange = function() { 
     setTimeout(function() { 
      funcMoveNavBar(0); 
      iStartPixelsX = 0; 
      iCurrentNavbarPixelsX = 0; 
      changePixels = 0; 
      leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width(); 
     }, 500); 
    } 

    $(document).ready(function() { 
     leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width(); 

     if (window.addEventListener) { 
      window.addEventListener("orientationchange", onOrientationChange, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onorientationchange", onOrientationChange); 
     } 

     $("#navBar").bind("vmousedown", function (e) { 
      bMouseDown = true; 
      bMouseUp = false; 

      iStartPixelsX = e.pageX; 
     }); 

     $("#navBar").bind("vmousemove", function (e) { 
      if (bMouseDown && !bMouseUp) { 
       e.preventDefault(); 
       changePixels = (e.pageX - iStartPixelsX) + iCurrentNavbarPixelsX; 

       funcMoveNavBar(changePixels); 
      } 
     }); 

     $("#navBar").bind("vmouseup", function (e) { 
      bMouseUp = true; 
      bMouseDown = false; 

      if (changePixels > 0) { 
       funcMoveNavBar(0); 
       changePixels = 0; 
       iCurrentNavbarPixelsX = 0; 
      } else if (($("#navBar div").last().offset().left + $("#navBar div").last().width()) < $("#navBar").width()) { 
       funcMoveNavBar($("#navBar").width() - leftMostOffsetPixels); 
       iCurrentNavbarPixelsX = $("#navBar").width() - leftMostOffsetPixels; 
       changePixels = $("#navBar").width() - leftMostOffsetPixels; 
      } else { 
       iCurrentNavbarPixelsX = changePixels; 
      } 
     }); 
    }); 
</script>

請記住，$（文件）。就緒（）是不推薦在jQuery Mobile中啓用AJAX導航時，因此您可能需要根據自己的需要定製此解決方案。

來源

2012-04-27 18:46:07

嘗試iScroll 4 by cubiq.org。它可以應用於頁面上的任何div，水平，垂直或兩個滾動，擁有漂亮的動畫（就像在智能手機上一樣），在webkit和Firefox（其他更糟糕）中速度非常快，最重要的是非常可定製。我花了12個小時尋找這樣的卷軸，這基本上涵蓋了我所有的需求。

來源

2012-12-19 11:16:58 koubic

這是一個css唯一的解決方案，利用移動瀏覽器不會創建任何滾動條的事實。某種視覺引導和內部自動寬度會很好，但並不總是需要的。

的jsfiddle與http://jsfiddle.net/KaGrc/1

CSS玩：

#outer { 
    width: 100%; 
    overflow: auto; 
} 

#inner { 
    width: 800px; 
}

HTML：

<div id="outer"> 
    <div id="inner"> 
     content1 content2 content3 content4 content5 content6 content7 content8 content9 content10 content11 content12 
    </div> 
</div>

來源

2013-06-08 13:13:53

水平滾動觸摸菜單？

回答

相關問題