Arret de défilement d'un texte

19 déc. 2006, 11:21

Bonjour,

Suite à une question précédente, j'ai récupéré sur le forum un script permettant de créer un bandeau circulaire (http://www.phpfrance.com/forums/voir_su ... -xhtml.php) qui marche.

Est-ce que quelqu'un de plus fort que moi en javascript peut me dire s'il est possible de le modifier afin d'arrêter le défilement si on pointe la souris dessus.

Merci d'avance.

Mon code:

Code : Tout sélectionner

<script language="JavaScript" type="text/javascript">
var defile;// l'element a deplacer 
var psinit = 800; // position horizontale de depart 
var pscrnt = psinit;        
function texteDefile() { 
   if (!defile) defile = document.getElementById('defile'); 
   if (defile) { 
      if(pscrnt < ( - defile.offsetWidth) ){ 
         pscrnt = psinit; 
                } else { 
         pscrnt+= -1; // pixel par deplacement 
      } 
      defile.style.left = pscrnt+"px"; 
   } 
} 
setInterval("texteDefile()",5); // delai de deplacement  

</script>

<html>
<head>

<title>Test Bannière</title>
<Link REL="stylesheet" TYPE="text/css" HREF="style.css">
		<style type="text/css" media="screen">
		<!--
#defile { position:absolute; margin-top:1px; background-color:transparent; }

</style>

</head>

<body>

  <div style="width:190px" id="defile">Voila un tres joli texte defilant</div> 


</body>
</html>

19 déc. 2006, 11:48

Hello

il existe une fonction clearInterval() qui te permet d'arrêter le timer, à condition de lui avoir donné un nom :

var monTimer;
...
function texteDefile() { 
  monTimer = setInterval(...);
}

Il te suffit alors d'appeller la fonction "clearInterval(monTimer)" sur l'action onMouseOver pour l'arrêter. Par contre il te faudra ensuite le relancer sur le onMouseOut si tu veux qu'il reprenne

19 déc. 2006, 12:00

Pour être honnête je vois à peu près ce que je dois faire, mais ce n'est pas encore dans la poche.

Bon, je prend le manuel et je posterai une question si nécessaire.

Encore merci.

19 déc. 2006, 23:43

J'ai suivi ton exemple et j'arrive à arrêter le script sur l'évènement mouseover, mais que faut-il écrire (car je n'y n'arrive pas) dans l'évènement mouseout pour le faire redémarrer. Merci.

Code : Tout sélectionner

<script language="JavaScript" type="text/javascript">
var defile;// l'element a deplacer 
var psinit = 800; // position horizontale de depart 
var pscrnt = psinit;  
var montimer;      
function texteDefile() { 
   if (!defile) defile = document.getElementById('defile'); 
   if (defile) { 
      if(pscrnt < ( - defile.offsetWidth) ){ 
         pscrnt = psinit; 
                } else { 
         pscrnt+= -1; // pixel par deplacement 
      } 
      defile.style.left = pscrnt+"px"; 
   } 
} 
montimer=setInterval("texteDefile()",5); // delai de deplacement  

</script>

<html>
<head>

<title>Test Bannière</title>
<Link REL="stylesheet" TYPE="text/css" HREF="style.css">
		<style type="text/css" media="screen">
		<!--
#defile { position:absolute; margin-top:1px; background-color:transparent; }

</style>

</head>

<body>

<div onMouseOver="clearInterval(montimer)" onMouseOut="" style="width:190px" id="defile">Voila un tres joli texte defilant </div>

</body>
</html>

19 déc. 2006, 23:52

Note : Thipo, ajuste la fiche de ton profil pour autoriser les bbCodes. Sinon, les balises comme [code] ne sont pas interprétées et ne servent à rien.

J'ai corrigé pour ce message, mais je ne le ferai pas à chaque fois.

Merci

20 déc. 2006, 00:09

Voilà c'est fait. Je me disais bien qu'il y avait quelque chose de pas normal.

20 déc. 2006, 00:42

Pour relancer je dirais qu'il faut refaire appel à "setInterval"

20 déc. 2006, 01:43

C'est l'écriture du redémarrage qui me posait problème.
Voici ce que j'ai écris par la suite. Bien que çà marche, je voudrais l'avis d'un spécialiste pour savoir si on peut optimiser ce code pour supprimer le doublon de la ligne

Code : Tout sélectionner

montimer=setInterval("texteDefile()",5);

Merci.

Code : Tout sélectionner

<script language="JavaScript" type="text/javascript">
var defile;// l'element a deplacer 
var psinit = 800; // position horizontale de depart 
var pscrnt = psinit;  
var montimer;      
function texteDefile() { 
   if (!defile) defile = document.getElementById('defile'); 
   if (defile) { 
      if(pscrnt < ( - defile.offsetWidth) ){ 
         pscrnt = psinit; 
                } else { 
         pscrnt+= -1; // pixel par deplacement 
      } 
      defile.style.left = pscrnt+"px"; 
   } 
} 

function restartDefile() {
	montimer=setInterval("texteDefile()",5);
	}
	
montimer=setInterval("texteDefile()",5); // delai de deplacement  

</script>

<html>
<head>

<title>Test Bannière</title>
<Link REL="stylesheet" TYPE="text/css" HREF="style.css">
		<style type="text/css" media="screen">
		<!--
#defile { position:absolute; margin-top:1px; background-color:transparent; }

</style>

</head>

<body>

<div onMouseOver="clearInterval(montimer)" onMouseOut="restartDefile()" style="width:190px" id="defile">Voila un tres joli texte defilant </div>

</body>
</html>

[/code]

20 déc. 2006, 02:10

Bonsoir,

Remplace cette ligne

Code : Tout sélectionner

montimer=setInterval("texteDefile()",5); // delai de deplacement

par

Code : Tout sélectionner

window.onload = restartDefile;

20 déc. 2006, 11:18

Ok. Merci et bonne fêtes à tous.

Arret de défilement d'un texte

Qui est en ligne