1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Effets
  5. Texte défilant verticalement avec pause type marquee

Texte défilant verticalement avec pause type marquee

Soyez le premier à donner votre avis sur cette source.

Vue 42 816 fois - Téléchargée 2 331 fois

Télécharger le projet
Commenter

Description

Ecrit avec la syntaxe DOM1 pour être simple et compatible avec les navigateurs modernes, IE5 inclus. Netscape4, IE4 et Opéra 6 sont incompatibles. Faites moi part de vos essais. Je doute du fonctionnement sur Linux (konqueror, Atari) ou Mac.
Ouvrez le zip pour essayer.
Le copié/collé du code ne fonctionne pas. Merci markachat de m'avoir signalé le bug.

Source / Exemple : 


<html>
<head>
<style type="text/css" />
body{text-align:center;width:100%;}
#fenetre{position:relative;overflow:hidden;width:400px;text-align:left;margin:auto;
background-color:#C0C080;border:3px inset;}
#marquee{color:#002000;padding:0 5px;}
</style>
<script type="text/javascript">
<!--
// pas de défilement :
var pas=2
// hauteur de la partie visible
var h_fen="100px"

function scrollmrq(){
if ( parseInt(mrq.style.top) > -h_mrq )
mrq.style.top = parseInt(mrq.style.top)-pas+"px"
else
mrq.style.top=parseInt(h_fen)+"px"
}

function init_mrq(){
mrq=document.getElementById("marquee"); 
fen=document.getElementById("fenetre"); 
fen.onmouseover=function(){stoc=pas;pas=0};
fen.onmouseout=function(){pas=stoc};fen.style.height=h_fen;
h_mrq=mrq.offsetHeight;
with(mrq.style){position="absolute";top=h_fen;}
setInterval("scrollmrq()",100);
}
window.onload=init_mrq
//-->
</script>

</head>
<body>
<h2>Texte défilant verticalement avec pause type MARQUEE</h2>
<p><strong>Pause</strong> : passez votre souris dessus.</p>
<div id="fenetre">
  <div id="marquee">
    <cite>&nbsp;&nbsp;Grâce à la balise html <marquee> vous pouvez obtenir qu'un texte au milieu d'un contexte défile automatiquement comme dans l'écran de veille connu de Windows "Marquee". Cependant, ces données ne sont  interprétées que par l' Explorer Internet MS et ne font pas partie du standard HTML.</cite>
    <h3>Description :</h3>
    <p>Basé sur 2 div imbriqués :</p>
<ul>
      <li>&quot;fenetre&quot; avec un style &quot;overflow:hidden&quot; ne laisse apparaître qu'une partie de son contenu.</li>
  <li>&quot;marquee&quot; contient le texte à faire défiler au format HTML </li>
</ul>
<h3>les fonctions javascript :</h3>
<ul>
  <li>&quot;scrollmrq&quot; fait défiler le div &quot;marquee&quot; de bas en haut dans le div &quot;fenetre&quot;, le remet au départ quand il déborde et le cycle continu </li>
  <li>&quot;init_mrq&quot; initialise.</li>
</ul><h3>Accessible :</h3>
    <p>Au cas ou javascript serait désactivé ou incompatible ( Netscape 4, Opéra 6), le contenu du div  &quot;marquee&quot; apparaît fixe et complet dans la page.</p>
    <h3>Paramétrage :
</h3>
    <ul>
      <li>Le contenu HTML dans le div id="marquee"</li>
      <li>Le style dans la feuille de  style </li>
      <li>Dans le script
        <ul>
          <li>Le pas  de défilement : pas.</li>
          <li>La hauteur de la partie visible : h_fen.</li>
        </ul>
      </li>
    </ul>
        
    &nbsp;&nbsp;Essayé avec succès sur IE6, Mozilla 1.6, Netscape7, Opéra 7, FireFox sur WIN98. Faites part de vos constatations sur d'autres configurations, merci.
  </div>
</div>

</body>
</html>

Conclusion :


rien de plus
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
lecoriace Messages postés 101 Date d'inscription mercredi 28 juillet 2010 Statut Membre Dernière intervention 12 janvier 2022
21 oct. 2013 à 15:16
c'est bien d'avoir raccourci le temps d'arrêt entre la 1er image et la dernière. ce qui serait encore intéressant c'est que l'arrêt ne se fasse pas sentir. quelle devienne une boucle sans espace blanche. quand la dernière image apparaît la première la suit sans qu'il y ait d'espace blanc
Tibawbaw Messages postés 1 Date d'inscription lundi 30 janvier 2006 Statut Membre Dernière intervention 9 avril 2013
9 avril 2013 à 11:26
Bonjour à tous,

Je déterre un peu ce topic, mais je l'ai utilisé récemment et je voulais savoir si quelqu'un pouvait m'aider à le modifier pour qu'il colle exactement à ce que je voudrais faire...

Serait-il possible de faire commencer le texte à afficher directement en haut de la zone (et ne pas attendre quelques secondes que le texte arrive en haut, laissant la zone blanche).

Serait-il également possible de ne pas laisser le blanc entre la fin du texte et le début, à la fin de la boucle ?

Je n'y connais presque rien à JS, donc c'est vraiment l'appel à l'aide d'un grand novice :-)

D'avance merci !
cs_lanner Messages postés 131 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 8 avril 2015
1 mars 2009 à 18:56
Salut, bravo pour ce code commencer :)
Comment faire pour placer 2 scroll sur la meme page , car le deuxieme forcement ne fonctionne pas et je ne sais pas comment modifier la source pour le faire , j'ai bien tenté mais renommer les fonctions et les balises css ne suffit pas
merci
simobo Messages postés 1 Date d'inscription samedi 4 mai 2002 Statut Membre Dernière intervention 20 octobre 2008
20 oct. 2008 à 06:40
Bonjour,
Ce code est sympa, il y a cependant un petit bug qui fait qu'il ne défile qu'une seule fois sur Firefox et Safari.
Dans la fonction : scrollmrq()
Il faudra modifier la dernière ligne par : mrq.style.top = fen.offsetHeight+"px";
En d'autres termes, il faudra ajouter '+"px"' pour le top soit défini en pixel.
A part cela, çà marche sur Firefox, IE et Safari super bien.
Je me suis permis un petit changement dans le code afin que le délai entre la disparition de la dernière news et l'apparition de la 1ère soit le plus court possible, je le partage avec vous :

<script type="text/javascript">
<!--
// pas de défilement :
var pas=1;
// hauteur de la partie visible
var h_fen="160px";
var h_fen_start="140px";

function scrollmrq(){
if ( parseInt(mrq.style.top) > -h_mrq+30 )
mrq.style.top = parseInt(mrq.style.top)-pas+"px";
else
mrq.style.top = h_fen_start;//fen.offsetHeight+"px";
}

function init_mrq(){
mrq = document.getElementById("marquee");
fen = document.getElementById("fenetre");
fen.onmouseover = function(){stoc=pas;pas=0};
fen.onmouseout = function(){pas=stoc};
fen.style.height = h_fen;
h_mrq = mrq.offsetHeight;
with(mrq.style){position="absolute";top=h_fen_start;}
setInterval("scrollmrq()",50);
}
window.onload=init_mrq;
//-->
</script>
cs_NTIC Messages postés 4 Date d'inscription mercredi 1 décembre 2004 Statut Membre Dernière intervention 3 avril 2007
3 avril 2007 à 16:09
Bonjour,

SYmpa ce code. Mais sur firefox, il ne défile qu'une seule fois et dans ie, nickel.

Comment faire pour qu'il défile indéfiniment ou un certain nombre de fois???
Afficher les 19 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.