Page 1 sur 1
Arret de défilement d'un texte
Posté : 19 déc. 2006, 11:21
par thipo
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>
Posté : 19 déc. 2006, 11:48
par Ryle
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
Posté : 19 déc. 2006, 12:00
par thipo
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.
Posté : 19 déc. 2006, 23:43
par thipo
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>
Posté : 19 déc. 2006, 23:52
par Cyrano
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
Posté : 20 déc. 2006, 00:09
par thipo
Voilà c'est fait. Je me disais bien qu'il y avait quelque chose de pas normal.
Posté : 20 déc. 2006, 00:42
par Truc
Pour relancer je dirais qu'il faut refaire appel à "setInterval"
Posté : 20 déc. 2006, 01:43
par thipo
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
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]
Posté : 20 déc. 2006, 02:10
par Ajoloca
Bonsoir,
Remplace cette ligne
Code : Tout sélectionner
montimer=setInterval("texteDefile()",5); // delai de deplacement
par
Posté : 20 déc. 2006, 11:18
par thipo
Ok. Merci et bonne fêtes à tous.