Texte défilant, deux effets, compatible firefox & ie

Soyez le premier à donner votre avis sur cette source.

Vue 41 513 fois - Téléchargée 2 385 fois

Description

Un code simple permettant de faire défiler, un texte, un message, dans une page html.
Compatible Firefox et IE.

Source / Exemple :


<html>
<head><title>Message défilant</title>
<style type="text/css">
.span_text_deroulant{FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana;FONT-WEIGHT:bold;FONT-SIZE:10pt;width:478px;COLOR:#FFFF99;letter-spacing: 0em; word-spacing: 0em;vertical-align:bottom;cursor:default;}
</style>
<SCRIPT type="text/javascript">
// Message défilant en javascript
// Nocture @ 2007
// Affiche un message défilant dans une page HTML
// Script compatible IE (version 6 & +) et Firefox (version 1.5 & 2)

// Le message a faire défiler
var notre_msg="Codes-Sources : www.javascriptfr.com, c'est gratuit et très patique...    .::.    Ne ratez pas les TechDays 2007 . . . . . . .   ";

// Deux effets possibles avec mem_msg
// Effet 1 = sans effet, défilement normal,
// il faut mettre un maximum d'espaces pour enlever l'effet du glissement
// var mem_msg='                                                                                          '; // 90 espaces
// Effet 2 = au démarrage, glissement du texte puis défilement
var mem_msg=' '; // seulement 1 espace
var pos_char=0; // variable de mémorisation de position caractère

function msg_defilant() {
	var vitesse_msg = 80; // règle la rapidité, diminue = plus rapide, augmente = plus lent
	// vérif. si position caractère supérieur a la longueur de la chaine
	//if (pos_char >= notre_msg.length) {pos_char=0}
	mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
  	//pos_char++;
	pos_char = (pos_char + 1) % notre_msg.length;
	// on limite la largueur en terme de carateres	
	var msg_tmpo=mem_msg; // variable temporaire
	mem_msg="";
	mem_msg=msg_tmpo.substring(msg_tmpo.length-48,msg_tmpo.length); // 48 caractères
	msg_tmpo="";
	msg_tmpo = mem_msg.replace(/ /g, " "); // remplace les espaces par : " "
	// Ajout d'un décalage d'un espace a gauche entre le texte et l'image
	msg_tmpo=" " + msg_tmpo; 
	// Insertion du texte
	var b_txt_deroulant=document.getElementById("modif_txt_deroulant");
	b_txt_deroulant.innerHTML=msg_tmpo;
	window.setTimeout("msg_defilant()",vitesse_msg); // Re-lance la fonction
}
{window.setTimeout("msg_defilant()",100);} // Activation du message défilant
</SCRIPT>
</head>
<body bgcolor="#80A4E8" link="#000099" vlink="#000099" alink="#cc0000" style="scrollbar-face-color:#97B9FF;scrollbar-3dlight-color:#000000;scrollbar-darkshadow-color:#000000;scollbar-highlight-color:#000000;scrollbar-shadow-color:#000000;">
<table align="center">
	<tr>
		<td style="WIDTH:480px;HEIGHT:16px;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;vertical-align:middle;cursor:default;">
			<div style="position:absolute;width:480px;height:16px;background:url(bg_bandeau_txt_480.gif);background-repeat:no-repeat;FONT-WEIGHT:bold;FONT-SIZE:11pt;COLOR:#000099;cursor:default;"> </div>     <span id="modif_txt_deroulant" class="span_text_deroulant">     </span>
		</td>
	</tr>
</table>
</body>
</html>

Conclusion :


Code compatible, Internet Explorer et Firefox.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
23 juin 2011

le code marche super bien,c sympa.mais ya t'il un moyen de le faie défiler sur toute la largeur de la page en allant de gauche à droite.j'ai beau tout essayer mais il marche pas!!
Messages postés
2
Date d'inscription
lundi 11 juillet 2005
Statut
Membre
Dernière intervention
2 janvier 2010

Bonjour Nocturne,
j'ai parcouru le code rapidement, en faissant des recherches pour savoir comment mon code avec setInterval soit conpatible avec les naviguateurs. Et, un point sur ton code ma surpris. Je precise que je m'y connais pas assez bien en JS. Toute fois, les lignes 42 et 43 m'ont interpellées...
41 # [...]
42 # }
43 # {window.setTimeout("msg_defilant()",100);}
44 # [...]
Je ne doutes pas que le script fonctionne.

Il y a deux crochés qui se suivent }{ .

Peut-me donner des explications, sur cette façon de coder en javascript ?
D'habitude je m'atendrais a quelque chose entre un croché fermant ('}') et un autre ouvrant ('{').

Merci de me repondre...
Tom
Messages postés
1
Date d'inscription
lundi 12 septembre 2005
Statut
Membre
Dernière intervention
24 novembre 2008

Bonjour,
Le code marche parfaitement en local, mais dès que je passe le tout en ligne cela ne marche plus, pourtant je transfert bien tous les fichiers...
Quelqu'un aurait-il une explication ?
Merci d'avance
Messages postés
115
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
15 novembre 2007

Bonne remarque d'Anthed concernant la modification du if par un modulo: Modif effectué
//if (pos_char >= notre_msg.length) {pos_char=0}
mem_msg=mem_msg + notre_msg.substring(pos_char,pos_char+1);
//pos_char++;
pos_char = (pos_char + 1) % notre_msg.length;

Parcontre je reste sur l'utilisation de setTimeout car la fonction setInterval n'est pas reconnu par tous les navigateurs.

Merci pour tes idées.
Messages postés
152
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
17 janvier 2014
3
Quelques idées qui ne changent pas grand chose mais qui sont toujours bonnes à prendre :

1. Tu peux remplacer :
if (pos_char >= notre_msg.length) {pos_char=0}
pos_char++;

par:
pos_char = (pos_char + 1) % notre_msg.length;

-> modulo, c'est plus sympa que if ...

2. Une fonction qui s'auto-appelle avec setTimeout peut être remplacé par un setInterval. En plus, ça permet aux différents appels d'être plus réguliers dans le cas où la fonction est un peu lourde. Si, par exemple, son temps d'exécution se situe entre 15 et 50 ms et que ton intervalle est de 100ms, les appels se feront entre 115 et 150ms alors qu'avec setInterval, ce sera bien toujours 100ms (attention toutefois de ne pas mettre un temps trop petit, si la fonction peut prendre plus de temps que l'intervalle, bonjour l'affichage ...)

Enfin, pour répondre à JackNumber, il suffit d'introduire une variable globale en guise de compteur, de l'incrémenter à chaque passage dans la fonction et d'interrompre les appels à la fonction dès que le compteur atteint une certaine valeur (n * la longueur du texte pour le faire défiler n fois).

Tchô.
Afficher les 17 commentaires

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.