Equivalent marquee en javascript avec JQuery
Pour faire défiler un texte en XHTML, le W3C n’autorise pas la balise marquee (ce qui est assez logique sémentiquement : faire défiler un texte relève de la forme et non du fond).
Voici un petit script JS qui permet de faire défiler un texte de droite à gauche.
Code HTML :
<div id='marquee-wrapper'> <span id='marquee'> Mon texte à faire défiler </span> </div>
Code CSS :
#marquee-wrapper
{
position:relative;
width:100%;
overflow:hidden;
height:100%;
}
#marquee
{
position:absolute;
top:0px;
left:0px;
white-space : nowrap;
}
Et le code JS :
La fonction JS :
function marquee(idWrapper,idMarquee,vitesse)
/*
* idWrapper : l'identifiant du div autour du span contenant le texte à faire défiler
* idMarquee : l'identifiant du span autour du texte
* vitesse : nombre de millisecondes entre chaque déplacement de 1px
*/
{
var oIdWrapper=$('#'+idWrapper);
var oIdMarquee=$('#'+idMarquee);
var width=oIdMarquee.width();
var width2=oIdWrapper.width();
id_inst=setTimeout(function() {marquee(idWrapper,idMarquee,vitesse)},vitesse);
var l=parseInt(oIdMarquee.css('left'));
oIdMarquee.css({left:(l-1)+'px'});
if((-parseInt(oIdMarquee.css('left')))>=(width))
{
oIdMarquee.css({left:(width2)+'px'});
}
}
L’appel de la fonction :
$(window).load(
function(){
marquee('marquee-wrapper','marquee',10);
}
);





Laissez un commentaire