Come scorrere un Marquee in JavaScript

November 3

Il tag marquee è un elemento HTML non standard infame che risale ai primi anni del World Wide Web. Contenuto inserito in un tendone scorre attraverso più e più volte, attirando l'attenzione dell'utente. Il tag tendone in HTML è deprecato e il suo uso è sconsigliato dalla maggior parte degli sviluppatori web. Tuttavia, è possibile resuscitare l'elemento tendone sulle tue pagine Web utilizzando codice JavaScript e CSS.

istruzione

1 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

Ritardo var = 10, quantità = 1;

Funzione scrollMarquee (id) {

var ref=document.getElementById(id);

ref.scrollLeft + = importo;

if (ref.scrollLeft> = ref.scrollWidth - ref.offsetWidth) {

ref.scrollLeft = 0;

}

setTimeout ( "scrollMarquee ( '" + id + "');", ritardo);

}

</ Script>

2 Aggiungere il seguente codice CSS tra i tag "testa" del documento HTML:

<Style type = "text / css">

.tendone{

overflow: hidden;

white-space: nowrap;

}

.pad {

display: inline-block;

width: 100%;

}

</ Style>

3 Aggiungere il seguente codice al corpo del documento HTML in cui si desidera inserire un tendone:

<Div class = "tendone" id = stile "marquee1" = "width: 150px;"> <span class = "pad"> </ span>

contenuti Marquee va qui

<Span class = "pad"> </ span> </ div> <script type = "text / javascript"> scrollMarquee ( 'marquee1'); </ script>

Specificare la larghezza del tendone nel attributo "stile" del tag "div". È possibile utilizzare pixel (px) o percentuale della larghezza della pagina (%). Posizionare il contenuto del tendone tra la prima e l'ultima riga. È possibile includere qualsiasi contenuto HTML che ti piace. Se si vuole fare un altro tendone, è sufficiente incollare il codice di nuovo da qualche altra parte sulla pagina, e modificare l'attributo "id" del tag "div" e l'argomento della chiamata "scrollMarquee" ad un nome univoco, come ad esempio "marquee2 ".

Consigli e avvertenze

  • Regolare la "quantità" e variabili "ritardo" nel codice JavaScript per modificare la velocità del tendone. "Importo" è il numero di pixel delle tendone si muove ogni volta che scorre, e "ritardo" è la quantità di tempo tra ogni rotolo in millisecondi.