Médiaforma

jQuery – Exercice sur les plugins

Print Friendly

Testez si vous avez compris comment utiliser un plugin

Installez et utilisez le plugin Endless Div Scroll (ce plugin se trouve dans la catégorie DOM and Other Plugins). Ecrivez le code nécessaire pour obtenir le résultat suivant (les images sont celles fournies avec le plugin. Elles se trouvent dans le dossier imgs) :

 

 

 

Solution

Copiez le dossier imgs et le fichier endless_scroll_min.js dans le dossier c:\jquery.

Tapez le code suivant et sauvegardez-le sous le nom endless-scroll.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Scrolling sans fin</title>
    <style>
      .es {
        font-family:Verdana;
        font-size:20px;
        margin:0px auto 0px auto;
        background-color:#ffff99;
        border-radius: 15px;
        border:1px solid #cccc33;
        padding:4px;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <script src="endless_scroll_min.js"></script>

    <div id="divId""><img src="imgs/i0.jpg"><img src="imgs/i1.jpg"><img src="imgs/i2.jpg"><img src="imgs/i3.jpg"><img src="imgs/i4.jpg"><img src="imgs/i5.jpg"><img src="imgs/i6.jpg"><img src="imgs/i7.jpg"><img src="imgs/i8.jpg"><img src="imgs/i9.jpg"><img src="imgs/ia.jpg"><img src="imgs/ib.jpg"><img src="imgs/ic.jpg"><img src="imgs/id.jpg"></div><br>
    <div id="spanId">Ce texte scrolle sans fin de la droite vers la gauche grâce au plugin endless-scroll. </div>

    <script>
      $(function() {
        $("#divId").endlessScroll({ width: "100%", height: "100px", steps: -2, speed: 50, mousestop: true });
        $("#spanId").endlessScroll({ width: "500px", height: "30px", steps: -1, speed: 20, mousestop: true });
       });
    </script>
  </body>
</html>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply