disign.it | Jquery: news ticker | a digital sign for a best design!
A digital sign for a best design
Javascript 4.121 visualizzazioni

Jquery: news ticker

03/07/2012

Una soluzione semplice per creare un box in cui scorrano con effetti fade diverse notizie organizzate in lista non ordinata.
Attraverso il css definiamo dimensioni, bordi, posizione, sfondi, carattere etc del nostro box:

 

ul#ciclo { width:150px; height:200px; border: 1px solid #eee; position:relative; overflow:hidden; }
ul#ciclo li { font-size: 14px; padding: 20px; opacity: 0; position: absolute }


Richiamiamo le  librerie Jquery, qui l'articolo su come caricare automaticamente sempre la versione più aggiornata,e impostiamo lo script che realizzerà il ciclo di lettura degli elementi della lista:

 

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#ciclo li").length -1;
             $("ul#ciclo li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

 });

 

Infine la lista che conterrà per ogni elemento la news da visualizzare, facendo attenzione ad assegnare ad ogni id degli elementi un numero progressivo incrementato:

 

<ul id='ciclo'>
<li id='ciclo1'><a href='#'>primo</a></li>
<li id='ciclo2'><a href='#'>secondo</a></li>
<li id='ciclo3'><a href='#'>terzo</a></li>
<li id='ciclo4'><a href='#'>quarto</a></li>

</ul>

 

Questo il link al sito dello sviluppatore Charles Harvey.

← Jquery: scrolling su ancore Php: rimuovere line break non necessari →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.