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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

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 (cs_Nocturne)