Problème Javascript mousemouve

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Matt69
Messages : 2
Enregistré le : 18 août 2019, 21:18

Problème Javascript mousemouve

Message par Matt69 » 18 août 2019, 21:25

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. :D

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);
});

Avatar du membre
webmaster
Administrateur du site
Messages : 96
Enregistré le : 28 févr. 2017, 15:19

Re: Problème Javascript mousemouve

Message par webmaster » 19 août 2019, 13:44

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
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Matt69
Messages : 2
Enregistré le : 18 août 2019, 21:18

Re: Problème Javascript mousemouve

Message par Matt69 » 20 août 2019, 16:19

Salut Webmaster :D ...
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.... :D ...

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...

Répondre