Problème Javascript mousemouve

[Matt69]

Bonjour, je m’appelle Mathias et j'ai suivi une formation graphisme/web et 3d, je suis sur ma 2eme année ou j'apprend le javascript en partis en cour et surtout chez moi.

Je suis en train de coder mon portfolio et la je bloque sur les fonctionnalités de mon carrousel, j'explique:

Il se compose de:

-une div avec tous les éléments de navigation(flèches gauche et droite et un exit )

ce que je veux faire:

-Quand la souris bouge dans la zone "move_it",les éléments de navigations arrives des 3 cotes et reste affiché pendant 4,5 secondes.

-Ensuite quand je passe sur la zone "back", les élément de navigation reste affiché en permanence.

Le problème:

-Le "mousemove" fonctionne très bien mais quand je survole les flèches avant la fin du temps, le "hover" des flèches ne fonctionne plus, il faut que je sorte de la fenêtre pour le réactiver.
Je n'arrive pas à comprendre comment stopper le décompte quand on sort de la zone pour récupérer le hover....

pouvez vous m'aider?

Merci.

Code : Tout sélectionner

mon HTML:



<div class="visioneuse">

<div class="move_it"></div>

<div class="fleche">

<div class="exit">
<div class="sortie"></div>
</div>

<div class="back">
<div class="flnav flg">
<img src="/images_Architecture/trace6.png" alt="">
</div>
</div>

<div class="back">
<div class="flnav fld">
<img src="/images_Architecture/trace5.png" alt="">
</div>
</div>

</div>

<div class="carousel">
<img src="/images_Architecture/test_View02.jpg" alt="">
<img src="/images_Architecture/test_View03.jpg" alt="">
<img src="/images_Architecture/test_View04.jpg" alt="">
<img src="/images_Architecture/test_View05.jpg" alt="">
<img src="/images_Architecture/test_View06.jpg" alt="">
<img src="/images_Architecture/test_View07.jpg" alt="">
<img src="/images_Architecture/test_View08.jpg" alt="">
<img src="/images_Architecture/test_View09.jpg" alt="">
</div>
</div>

et mon script:

move.addEventListener('mousemove',function(){
    flg.style.transform = 'translateX(0)';
    fld.style.transform = 'translateX(0)';
setTimeout(function(){
    flg.style.transform = 'translateX(-4vw)';
    fld.style.transform = 'translateX(4vw)';
},3000);
});

[webmaster]

Bonjour Mathias

Bravo pour l'envie d'apprendre en plus de l'école !

Je pense qu'il faut "tuer" un des timeout avec https://www.toutjavascript.com/referenc ... imeout.php au moment du passage sur le div back
Mais il faudrait le script complet pour mieux comprendre

[Matt69]

Salut Webmaster ...
Merci d'avoir prêter attention à mon message et merci pour le compliment....

En fait j'ai déjà essayer cette solution mais je sais pas si je l'ai bien appliquer...
Mais le problème reste le même ce n'est pas fluide, quand je sort de la zone mouse move, le mouse hover n'est pas pris en compte.... ...

Maintenant peut être faut il ajouter une fonction "onmouseover" dans le html directement.



Je t'envoi mon script au cas ou:


document.addEventListener('DOMContentLoaded', function () {

let position = 0;
let i;


/* CIBLAGE */

let carousel = document.querySelector('.carousel');
let visio = document.querySelector('div.visioneuse');
let images = document.querySelectorAll('div.page div.affiche');
let images_2 = document.querySelectorAll('div.page div.affiche_2');
let sortie = document.querySelector('div.visioneuse div.sortie');
let page = document.querySelector('div.page');
/* NAVIGATION */
let fl = document.querySelector('div.fleche');
let flg = document.querySelector('div.fleche div.flnav.flg');
let fld = document.querySelector('div.fleche div.flnav.fld');
let back = document.querySelectorAll('div.back');
let move = document.querySelector('div.visioneuse div.move_it');


// Flèche GAUCHE
flg.addEventListener('click', function () {
if (position > 0) {
position--;
carousel.style.transform = "translateX(" + -(100 * position) + "%)";

}
});

// Flèche DROITE
fld.addEventListener('click', function () {
if (position < 7) {
position++;
carousel.style.transform = "translateX(" + -(100 * position) + "%)";

}
});


for (i = 0; i < images.length; i++) {
images.addEventListener('click', function () {
visio.style.transform = 'scale(1)';
fl.style.display = 'flex';
page.style.opacity = '0.1';
});
}
for (i = 0; i < images.length; i++) {
images_2.addEventListener('click', function () {
visio.style.transform = 'scale(1)';
fl.style.display = 'flex';
page.style.opacity = '0.1';
});
}
/* EXIT POUR MASQUER LE CAROUSEL */
sortie.addEventListener('click', function () {
visio.style.transform = 'scale(0)';
fl.style.display = 'none';
page.style.opacity = '1';
});

/*APPARITION DES FLECHES DE NAVIGATION */
for (b = 0; b < back.length; b++) {
back.addEventListener('mouseover', function () {
flg.style.transform = 'translateX(0)';
fld.style.transform = 'translateX(0)';

});

}
for (b = 0; b < back.length; b++) {
back.addEventListener('mouseout', function () {
flg.style.transform = 'translateX(-4vw)';
fld.style.transform = 'translateX(4vw)';
});
}




/* LA REACTION DU MOUSE MOUVE */

move.addEventListener('mousemove',function(){
flg.style.transform = 'translateX(0)';
fld.style.transform = 'translateX(0)';
let t = setTimeout(function(){
flg.style.transform = 'translateX(-4vw)';
fld.style.transform = 'translateX(4vw)';

},3000);
clearTimeout(t);
});

});


MERCI...

[Albrecht]

Bonjour Mathias,

Quelle était la solution? Je fais mon dernier projet sur "mousemouve". J'ai commencé mon Cours complet (2020) - un cours Javascript avec Pierre Giraud. Et puis j’envisage de postuler pour une Formation ICN-ISN à l’IREM d’Aix-Marseille.