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

Soyez le premier à donner votre avis sur cette source.

Vue 41 373 fois - Téléchargée 2 372 fois

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

Ajouter un commentaire

Commentaires

Signaler
macgile
Messages postés
11
Date d'inscription
samedi 11 janvier 2003
Statut
Membre
Dernière intervention
2 décembre 2008
 -
Super :) Enfin un code simple et parfaitement fonctionnel pour des banniéres défilantes.

Car sur le net certain applique le proverbe
"Pourquoi faire simple, quant-ont peux faire compliqué"

bonne continuation,
macgile
Signaler
macgile
Messages postés
11
Date d'inscription
samedi 11 janvier 2003
Statut
Membre
Dernière intervention
2 décembre 2008
 -
j'ajouterais, qu'un bon developpeur est celui qui
fait en quelques lignes ce que d'autres font en mille lignes pour (peut-être) faire la demonstration de leur talent.

Ce commentaire n'inplique que moi.

macgile
Signaler
dingue2salsa
Messages postés
2
Date d'inscription
jeudi 8 mars 2007
Statut
Membre
Dernière intervention
21 mars 2007
 -
Ne fonctionne pas bien sous IE , défile sur 2 ou 3 lignes qq'ub sait pourquoi ? merci
Signaler
cs_Nocturne
Messages postés
115
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
15 novembre 2007
 -
Normalement, il fonctionne sous IE, testé avec IE6.
Si il défile sur 2 ou 3 lignes, c'est un problème de largeur, pour le vérifier, il faut diminuer le texte a faire defiler et modifier le limite en terme de carateres :
mem_msg=msg_tmpo.substring(msg_tmpo.length-48,msg_tmpo.length); // 48 caractères

Autrement il faut agrandir la largeur de la cellule du tableau.

Il faut egalement verifier la police car ce texte defilant ne fonctionne qu'avec certaines polices (caracteres de meme largeur).
FONT-FAMILY:Lucida Console, Lucida Sans Typewriter, Lithograph, Letter Gothic MT, Verdana

Voila qq pistes.
Signaler
dingue2salsa
Messages postés
2
Date d'inscription
jeudi 8 mars 2007
Statut
Membre
Dernière intervention
21 mars 2007
 -
super sympa pour ta réponse , j'ai réglé le problème
bon dev
Afficher les 17 commentaires
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)