Comment obtenir la direction du mouvement de la souris dans div en utilisant JavaScript

Le contenu de cet article explique comment obtenir la direction de déplacement de la souris dans un div à l'aide de JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il y a quelques jours, j'ai vu les légendes de texte attachées aux images Baidu. Elles seraient chargées en fonction de la direction du mouvement de la souris. J'ai trouvé cela assez intéressant, j'ai donc voulu implémenter une telle fonction. Après quelques recherches et recherches, j'ai trouvé deux méthodes d'implémentation.

Méthode 1 : utilisez quatre divs pour former une zone. La div à partir de laquelle vous vous déplacez est la direction à partir de laquelle vous vous déplacez.

Méthode 2 : Obtenez le point où la souris se déplace, quel côté est le plus proche de la gauche, de la droite, du haut et du bas du div. Le côté le plus proche est la direction dans laquelle la souris se déplace.

Pour la deuxième méthode, j'ai écrit une petite méthode. Le code est le suivant, à titre de référence uniquement :

function getDirection(ev) {
            var mx = ev.clientX,
                    my = ev.clientY;
            var el = this.offsetLeft,
                    et = this.offsetTop,
                    ew = this.clientWidth,
                    eh = this.clientHeight;
            var left = mx - el,
                    right = el + ew - mx,
                    top = my - et,
                    bottom = et + eh - my;
            var min = Math.min.apply(Math, [left, right, top, bottom]);
            if (min === left) {
                    return "left";
            } else if (min === right) {
                    return "right";
            } else if (min === top) {
                    return "top"
            } else {
                    return "bottom";
            }
    }

Ce qui précède est une introduction complète à la façon dont JavaScript obtient la direction de la souris. passer à un div. Si vous souhaitez en savoir plus sur le Tutoriel JavaScript, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!