Dopo aver visto una finestra con news a comparsa, implementeremo ora una barra orizzontale contenente news scorrevoli da destra verso sinistra (un cosiddetto news ticker) .
In questo caso è preferibile che il testo di ogni news sia composto esclusivamente dal titolo, il quale rimandi poi, tramite link, al testo completo.
In fondo all’articolo è possibile provare e scaricare il codice completo.

Per realizzare il box e l’effetto desiderato utilizzeremo jQuery e il plugin denominato liScroll che trasforma qualsiasi elenco in un news ticker a scorrimento.

A tal proposito vediamo il codice html:

<ul id="news">
     <li><span>News 1</span>
          <a href="#">Quel ramo del lago di Como ...</a>
     </li>
     <li><span>News 2</span>
          <a href="#">Si racconta che il principe di ...</a>
     </li>
     <li><span>News 3</span>
          <a href="#">Lucia entrò nella stanza ...</a>
     </li>
     <li><span>News 4</span>
          <a href="#">Il sole non era ancor tutto ...</a>
     </li>
     <li><span>News 5</span>
          <a href="#">Da i Promessi Sposi ...</a>
     </li>
</ul>

Grazie alle potenzialità di questo plugin il codice html si riduce ad un semplice elenco non ordinato. La regola generale è che: ogni voce dell’elenco è una news.
Per far si che sia possibile animare il news ticker è necessario assegnare un id all’elemento <ul>.
Prima di poter animare le news dobbiamo richiamare jQuery e il plugin. All’interno dell’head scriveremo:

<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type='text/javascript' src='jquery.li-scroller.1.0.js'></script>

Il codice Javascript per dare il via allo scorrere delle news è il seguente (si ricorda che va definito dopo il codice html dell’elenco o richiamato al completo caricamento della pagina):

<script type='text/javascript'>
     $("ul#news").liScroll({travelocity: 0.06});
</script>

Il metodo da invocare sull’elenco è liScroll a cui è possibile passare come parametro un valore che esprima la velocità di scorrimento del testo.
Il codice completo fornisce infine un file css modificabile per ottenere lo stile desiderato.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Sito ufficiale del plugin liScroll: http://www.gcmingati.net/