iPhone-Scroll-Bilder werden horizontal wie im AppStore

Ich Frage mich, ob es möglich ist, erstellen Sie ein HTML-div-container mit ein paar CSS-Magie, die zeigt, dass eine horizontale Bildlaufleiste angezeigt, wie das mit den screenshots auf der iTunes-Vorschau auf das web. Ich will dies funktioniert in Safari auf dem iPhone.

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

Möchte ich verwenden, um Miniaturansichten anzeigen, die in einer UIWebView auf iPhone. Ich experimentierte mit der css-Eigenschaft overflow aber nicht bekommen, um zu arbeiten.

Dank für Eure Antworten.

InformationsquelleAutor schaechtele | 2010-04-28
  1. 2

    Ich habe keine Zeit um es zu testen, aber ich denke, dass etwas entlang der Linien der folgenden arbeiten soll:

    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>

    Müssen Sie möglicherweise verwenden float: left; auf die li Elemente, aber ich bin mir nicht sicher. Und vielleicht hängt von dem browser, den Sie oder Ihre Benutzer, verwenden werden.

    Ich werde überprüfen Sie diese heraus, wenn ich nach Hause komme, aber jetzt biete ich Ihnen eine demo an: http://jsbin.com/atuvo

    • Vielen Dank für deine Antwort! Auf Firefox, Safari auf dem Mac funktioniert es einwandfrei, aber wenn ich öffnen Sie die demo auf dem iPhone, wird keine Bildlaufleiste angezeigt. Sehen Sie nur Punkt 1 bis Punkt 5.
    • sorry, es ist so lange gedauert um zu reagieren, aber die einzige Möglichkeit, die ich finden kann, ein iPhone zu ermöglichen scrollen innerhalb eines Elements ist, ziehen Sie mit zwei Fingern...das ist verrückt, und immer noch nicht show scroll bars (mit mobile safari, Opera für das iPhone nicht sogar erlauben, für whitespace: nowrap).
    • okay danke, dann muss ich eine andere Lösung finden!
    InformationsquelleAutor David Thomas
  2. 1

    Versuchen, diese...
    Wir haben eine schöne Komponente, die funktioniert mit jQuery. Es ist einfach zu bedienen.

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

    Gibt es auch eine demo, die funktioniert auf iPhone und iPad, wenn Sie möchten, es zu versuchen.

    Cheers,
    Lorenzo

    InformationsquelleAutor lomanf
  3. 0

    iScroll ist ziemlich genial, auch, es hat schöne horizontale momentum scrolling: http://cubiq.org/iscroll

    InformationsquelleAutor Chris
  4. 0

    Können Sie es hier 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>
    InformationsquelleAutor Anton
Schreibe einen Kommentar