Texte Défilant Continu

Commenter

Contenu du snippet

J'en avais besoin, je l'ai cherché, je l'ai pas trouvé ... Alors je l'ai fait :)

Un texte défilant (horizontal ou vertical) en continu style balise Marquee ( Non valide W3C) et même mieux car il n'y a plus le blanc entre chaque passage !

Voir la démonstration : http://www.jlmconsultant.fr/test/defiltexte.php
En situation sur un site : http://lidealduchti.fr 




<body>

<div id="defil1" style="z-index:1;position:relative;width:300px;border:1px solid #C0C0C0;overflow:hidden" onmouseover="Pause1();" onmouseout="Defile1();" >
 <div id="contenu1" style="z-index:1;position:relative;white-space:nowrap;display:inline;float:left;padding:5px" >
 123456789 <a href="[http://jlmconsultant.fr]" target="_blank">JLM Consultant</a>
 </div>
</div>

</body>





<script type="text/javascript">

// DEFIL TEXTE HORIZONTAL

var Timer1 ;
var Vitesse1 = 20 ;
var Scroll1 = 0 ;
var P1 = 0 ;
var Intro1 = true ;
var Boucle1 = false ;
// Texte1 peut être renseigné par une variable php
var Texte1 = '123456789 <a href="[http://jlmconsultant.fr]" target="_blank">JLM Consultant</a>' ;
// La séparation entre chaque texte
Texte1 = Texte1 + ' ... ' ;
var Contenu1 = document.getElementById("contenu1") ;
Contenu1.innerHTML = Texte1 ;
var LargC = Contenu1.clientWidth ;
var Defil1 = document.getElementById("defil1") ;
var LargD = Defil1.clientWidth ;
Contenu1.style.left = LargD + "px" ;

function Defile1()
{
 while ( LargC <= LargD )
 {
 Texte1 += Texte1 ;
 Contenu1.innerHTML += Texte1 ;
 LargC = Contenu1.clientWidth ;
 }
 if ( P1 == 0 )
 {
 Contenu1.innerHTML += Texte1 ;
 P1 = 1 ;
 }
Scroll1++ ; 
 if ( Intro1 == true && Scroll1 == LargD )
 {
 Scroll1 = 0 ;
 Contenu1.style.left = 0 + 'px' ;
 Intro1 = false ;
 Boucle1 = true ;
 }
 if ( Boucle1 == true && Scroll1 == LargC-10 ) // -10 compense le padding de 5px du div contenu1
 {
 Scroll1 = 0 ;
 Contenu1.style.left = 0 + 'px' ;
 }
Contenu1.style.left = ( Contenu1.offsetLeft - 1 ) + 'px' ;
Timer1 = setTimeout('Defile1()', Vitesse1) ;
}

function Pause1()
{
clearTimeout(Timer1) ; 
}

</script>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (JLM Consultant)