Cette Javascript le code déplacera une chaîne de texte unique qui contient le texte que vous choisissez dans un espace de sélection horizontal sans interruption. Pour ce faire, il ajoute une copie de la chaîne de texte au début du défilement dès qu'elle disparaît de la fin de l'espace de sélection. Le script calcule automatiquement le nombre de copies du contenu qu'il doit créer pour vous assurer de ne jamais manquer de texte dans votre texte de sélection.
Cela inclut le code de mes exemples, qui ajoute deux nouveaux objets mq contenant les informations à afficher dans ces deux chapiteaux. Vous pouvez supprimer l'un d'eux et modifier l'autre pour afficher un cadre de sélection continu sur votre page ou répéter ces instructions pour ajouter encore plus de cadres. La fonction mqRotate doit être appelée en passant mqr une fois que les chapiteaux sont définis pour gérer les rotations.
// Chapiteau de texte continu
// copyright 30 septembre 2009 par Stephen Chapman
// http://javascript.about.com
// l'autorisation d'utiliser ce Javascript sur votre page Web est accordée
// à condition que tout le code ci-dessous dans ce script (y compris ceux-ci
// commentaires) est utilisé sans aucune modification
fonction objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) renvoie obj.clip.width; return 0;} var mqr = []; une fonction
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 ('span') [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; pour (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 =
'absolu'; 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);}
fonction mqRotate (mqr) {if (! mqr) return; pour (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; pour (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);}
Le contenu textuel réel du rectangle de sélection va à l'intérieur du div dans une balise span. La largeur de la balise span correspond à la largeur de chaque itération du contenu dans le cadre (plus 5 pixels juste pour les espacer les uns des autres).
Enfin, assurez-vous que votre code JavaScript pour ajouter l'objet mq après le chargement de la page contient les bonnes valeurs.
Pour ajouter des chapiteaux supplémentaires, vous pouvez configurer des div supplémentaires dans le code HTML, en donnant à chacun son propre contenu textuel à l'intérieur d'une plage; configurez des classes supplémentaires si vous souhaitez donner un style différent aux chapiteaux; et ajoutez autant de nouvelles instructions mq () que de chapiteaux. Assurez-vous que l'appel mqRotate () les suit pour faire fonctionner les chapiteaux pour nous.