Loading:


    Przewijana galeria obrazków JavaScript (QScroller)

    Skrypt Javascript wyświetla galerię która umożliwia przewijanie obrazków w bardzo atrakcyjny sposób.

    Na początek pobierzemy biblioteke QScroller : [ pobierz ]


    Poniżej przedstawiam przykładowy kod korzystający z tej biblioteki używa on 3 obrazków :
    product1, product2, product3 , ale w samej paczce są już gotowe przykłady.

    Skrypt jest banalnie prosty w modyfikacji i na pewno uatrakcyjni waszą witrynę.



    Napisz Artyku³

    Listing


    <html>
    <head>
    <link href="qscroller.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="qscroller.js"></script>
    </head>
    <body>
    <div id="qscroller2" class="qscroller"></div>
    <div class="qscroller2-nav">
      <div>
      <a id="go-prev" href="javascript:void(0)">&lt;&lt;</a>&nbsp;
      <a id="go-next" href="javascript:void(0)">&gt;&gt;</a>
      </div>
    </div>
    <div class="hide">
      <div class="qslide2">
      <img src="images/product1.jpg" alt="" />
      <h1>Product1</h1>Simple example of product showcase. Use arrows at the bottom to scroll.
      </div>
      <div class="qslide2">
      <img src="images/product2.jpg" alt="" />
      <h1>Product2</h1>Product description here.
      </div>
      <div class="qslide2">
      <img src="images/product3.jpg" alt="" />
      <h1>Product3</h1>Product description here.
      </div>
    </div>
    <script type="text/javascript">
    <!--
    window.addEvent('domready', function() {
    var opt = {
        slides: 'qslide2',
            duration: 1500,
        buttons: {next:'go-next',prev:'go-prev'},
        transition: Fx.Transitions.Quint.easeOut
      }
      var scroller = new QScroller('qscroller2',opt);
      scroller.load();
    });
    //-->
    </script>
    <h2>&nbsp;</h2>
    </body>
    </html>
     




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors