Maison > interface Web > js tutoriel > 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 (exemple de code) ?

云罗郡主
Libérer: 2018-10-29 16:05:56
avant
2169 Les gens l'ont consulté

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.

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

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";
            }
    }
Copier après la connexion

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!

Étiquettes associées:
source:lvyestudy.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal