水平滚动触摸菜单？

我正在建设一个移动网站，客户想要一个顶部的菜单栏。菜单很宽，所以他希望通过左右拖动来水平滚动菜单。 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

水平滚动触摸菜单？

回答

相关问题