Texte Défilant Continu

1/5 (2 avis)

Snippet vu 18 026 fois - Téléchargée 13 fois

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

Ajouter un commentaire Commentaires
NHenry Messages postés 15083 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 19 septembre 2023 159
1 mars 2015 à 19:39
Comme précisé dans la description de la source, la balise marquee est dépréciée et sera bientôt retirée des navigateurs.
mik226 Messages postés 5 Date d'inscription jeudi 7 novembre 2013 Statut Membre Dernière intervention 1 mars 2015
1 mars 2015 à 18:49
ou sinon tu utilise la balise marquee de l'html préhistorique ca marche aussi
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)