Texte défilant, deux effets, compatible firefox & ie
Soyez le premier à donner votre avis sur cette source.
Vue 41 553 fois - Téléchargée 2 388 fois
Description
Un code simple permettant de faire défiler, un texte, un message, dans une page html.
Compatible Firefox et IE.
Code compatible, Internet Explorer et Firefox.
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
- Compatil text font
- Compatil text - Meilleures réponses
- Texte défilant javascript - Meilleures réponses
- Move the text 2 effets de textes turbo c++2 devc++4 - Codes sources - C / C++ / C++.NET (Astuces)
- Effets de textes multiples 2 mode graphique turbo c++ - Codes sources - C / C++ / C++.NET (Graphique)
- Javascript : Info-bulle personnalisable compatible firefox et ie - CodeS SourceS - Guide
- Texte défilant javascript - Guide
- Javascript : Superbe texte défilant - CodeS SourceS - Guide
Commentaires
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
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
//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
31. 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ô.
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.