Question

我想知道是否可以使用一些CSS魔术创建一个HTML div容器，该容器显示一个水平滚动条，就像在网络上的iTunes预览上截屏一样。我希望这能在iPhone上的Safari中运行。

e.g。 http://itunes.apple.com/app/super-monkey-ball/id281966695?mt=8

我想用它在iPhone上的UIWebView中显示缩略图。我试验了溢出的css属性，但没有让它工作。

感谢您的回复。

Answer 1

我现在没时间测试它，但我认为以下内容应该有效：

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

Answer 2

试试这个...... 我们做了一个很好的组件，可以使用jQuery。它很容易使用。

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

如果你想尝试一下，还有一个适用于iPhone和iPad的演示。

干杯，洛伦佐

Answer 3

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

Answer 4

你可以在这里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>

iPhone在AppStore中横向滚动图像

4 个答案: