iPhone Scroll images horizontally like in AppStore

问题

I was wondering if it's possible to create a HTML div container with some CSS magic that shows a horizontal scrollbar like the one with the screenshots on the iTunes preview on the web. I want this to work in Safari on the iPhone.

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

I would like to use that to display thumbnails in an UIWebView on iPhone. I experimented with the overflow css property but didn't get it to work.

Thanks for your replies.

回答1:

I don't have time to test it right now, but I think something along the lines of the following should work:

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>

You might need to use float: left; on the li elements, but I'm not sure. And it maybe depends on the browser you, or your users, will be using.

I'll check this out when I get home, but for now I offer you a demo at: http://jsbin.com/atuvo

回答2:

Try this... We did a nice component that works with jQuery. It's easy to use.

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

There's is also a demo that works on iPhone and iPad if you want to try it.

Cheers, Lorenzo

回答3:

iScroll is pretty awesome too, it does nice horizontal momentum scrolling: http://cubiq.org/iscroll

回答4:

You can take it here 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>

来源：https://stackoverflow.com/questions/2728715/iphone-scroll-images-horizontally-like-in-appstore

标签

iphone

html

css

uiwebview