Comment JavaScript obtient-il la direction dans laquelle la souris se déplace dans un div (exemple de code) ?

Comment JavaScript obtient-il la direction dans laquelle la souris se déplace dans un div ? Je pense que de nombreux amis qui viennent d'entrer en contact avec JavaScript se poseront de telles questions. Ce chapitre vous présentera comment obtenir la direction dans laquelle la souris se déplace dans le 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. J'espère qu'il vous sera utile.

Il y a quelques jours, j'ai vu les légendes de texte attachées aux images Baidu qui se chargeaient dans le sens du mouvement de la souris. J'ai trouvé que c'était assez intéressant, alors je voulais. pour mettre en œuvre 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 vidéo 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!