Questo JavaScript il codice sposta una singola stringa di testo che contiene qualsiasi testo scelto attraverso uno spazio di selezione orizzontale senza interruzioni. Lo fa aggiungendo una copia della stringa di testo all'inizio dello scorrimento non appena scompare dalla fine dello spazio di selezione. Lo script determina automaticamente quante copie del contenuto è necessario creare per garantire che il testo nel riquadro di selezione non finisca mai.
Questo include il codice dei miei esempi, che aggiunge due nuovi oggetti mq contenenti le informazioni su cosa visualizzare in quei due tendoni. È possibile eliminare uno di questi e modificare l'altro per visualizzare un riquadro di selezione continuo sulla pagina o ripetere tali istruzioni per aggiungere ancora più tendoni. La funzione mqRotate deve essere chiamata passando a mqr dopo aver definito i marchi poiché gestiranno le rotazioni.
// Selezione continua del testo
// copyright del 30 settembre 2009 di Stephen Chapman
// http://javascript.about.com
// è concessa l'autorizzazione per utilizzare questo Javascript sulla tua pagina web
// a condizione che tutto il codice seguente in questo script (compresi questi
// commenti) viene utilizzato senza alcuna modifica
function objWidth (obj) {if (obj.offsetWidth) restituisce obj.offsetWidth;
if (obj.clip) restituisce obj.clip.width; return 0;} var mqr = []; funzione
mq (id) {this.mqo = document.getElementById (id); var wid =
objWidth (this.mqo.getElementsByTagName ('span') [0]) + 5; var fulwid =
objWidth (this.mqo); var txt =
this.mqo.getElementsByTagName ( 'arco') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; per (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ( 'div');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position =
'assoluto'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
Heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funzione mqRotate (mqr) {if (! mqr) return; per (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; per (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
MQR [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
Il contenuto del testo effettivo per il riquadro di selezione va all'interno del div in un tag span. La larghezza del tag span è quella che verrà utilizzata come larghezza di ogni iterazione del contenuto nel riquadro di selezione (più 5 pixel solo per distanziarli l'uno dall'altro).
Infine, assicurati che il tuo codice JavaScript per aggiungere l'oggetto mq dopo il caricamento della pagina contenga i giusti valori.
Per aggiungere ulteriori tendoni, è possibile impostare ulteriori div nell'HTML, dando a ciascuno il proprio contenuto di testo all'interno di un intervallo; impostare classi aggiuntive se si desidera dare uno stile diverso ai tendoni; e aggiungi tutte le nuove istruzioni mq () quante ne hai. Assicurati che la chiamata mqRotate () li segua per far funzionare i tendoni per noi.