代码之家 › 专栏 › 技术社区 › schaechtele

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

uiwebview css html iphone

schaechtele · 技术社区 · 16 年前

我想知道是否有可能创建一个带有css魔术的html div容器,它显示一个水平滚动条,就像在itunes预览版上显示屏幕截图的滚动条一样。我希望这个能在iPhone的Safari中运行。

例如 http://itunes.apple.com/app/super-monkey-ball/id281966695?mt=8

我想用它在iphone上的uiwebview中显示缩略图。我尝试过溢出css属性,但没有成功。

谢谢你的回复。

4 回复 | 直到 13 年前

David Thomas 16 年前

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

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

lomanf 15 年前

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

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

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

干杯, 洛伦佐

Chris 15 年前

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

Anton 13 年前

你可以把它带到这里 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>

推荐文章