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 hori开发者_运维技巧zontal 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.
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
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
iScroll is pretty awesome too, it does nice horizontal momentum scrolling: http://cubiq.org/iscroll
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>
精彩评论