iPhone像在AppStore中一样水平滚动图像

我现在没有时间测试,但我认为以下几点应该行得通:

ul#container
{
overflow: hidden;
overflow-x: scroll;
width: 500px; /* or whatever */
height: 200px; /* or whatever */
white-space: nowrap;
}

ul#container li
{
display: inline-block;
width: 100px; /* or whatever */
height: 200px; /* or whatever */
}


<ul id="container">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item three</li>
  <li>...<!-- you get the point --></li>
</ul>

你可能需要使用 float: left; 上 li 元素,但我不确定。这可能取决于您或您的用户将使用的浏览器。

我回家后会看看这个,但现在我提供给你一个演示: http://jsbin.com/atuvo

试试这个… 我们用jquery做了一个很好的组件。它很容易使用。

http://api.mutado.com/mobile/mtdtouch/js/

如果你想试试的话,还有一个可以在iphone和ipad上运行的演示。

干杯, 洛伦佐

iScroll也非常棒,它可以很好地进行水平动量滚动: http://cubiq.org/iscroll

你可以把它带到这里 http://appradar.ru/

<script src="http://appradar.ru/wp-content/themes/appradar/js/jquery.horizontal.scroll.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            var w = 0, h = 0;
            $('#slider div').each(function(i, index){
                w += $(this).outerWidth(); 
                h = $(this).outerHeight() > h ? $(this).outerHeight() : h;
            });
            $('#slider').width(w).height(h);
            $('#slider-outer').height(h + 8).horizontalScroll();            
        });
    </script>