Webinventif

Décidément, c'est la journée jQuery ! Cette fois-ci il s'agit d'un petit script qui va vous permettre d'afficher des infos qui s'enchaineront avec un effet de fade in - fade out ! (Comme sur le blog de Stéphane, les commentaires dans sa sidebar et comme dans ma propre sidebar en test sur wiki-feed )

Newsticker affiche donc simplement chaque élément d'une liste donnée ( <li>item</li> ) les uns à la suite des autres avec un joli effet de transparence. Et le défilement se met en pause lorsque l'on survol l'item.

Mise en place:

• Comme d'habitude, on commence par inclure le framework jquery
  <script type='text/javascript' src='jquery.js'></script>
• Ensuite on intègre le Watermark Input Plugin
  <script type='text/javascript' src='jquery.newsticker.pack.js'></script>
• Vous intégrez votre liste d'éléments sur votre page
  <ul id="news">
          <li>Texte 1</li>
          <li>Texte 2</li>
          <li>Texte 3</li>
          <li>Texte 4</li>
  </ul>
• Ensuite initialisez la liste avec son id (a mettre dans un .js ou dans des balises <script type="text/javascript">...</script>)
  $(document).ready(function(){
          $("#news").newsTicker();        
  } )
• Et pour finir, un petit bout de css à votre gout, par exemple
  .newsticker {
          list-style-type: none;
          border: 1px dashed #fff;
          background: #050c44;
          padding: 3px;
          margin: 0;
  }

La page de demo ...

Sur la page du site, il y a aussi une explication pour charger une liste se trouvant sur une page externe.