Heim > Web-Frontend > js-Tutorial > Wie erhält JavaScript die Richtung, in die sich die Maus in ein Div bewegt (Codebeispiel)?

Wie erhält JavaScript die Richtung, in die sich die Maus in ein Div bewegt (Codebeispiel)?

云罗郡主
Freigeben: 2018-10-29 16:05:56
nach vorne
2169 Leute haben es durchsucht

Wie bestimmt JavaScript die Richtung, in die sich die Maus in ein Div bewegt? Ich glaube, dass viele Freunde, die gerade mit JavaScript in Kontakt gekommen sind, solche Fragen haben werden. In diesem Kapitel erfahren Sie, wie Sie mithilfe von JavaScript die Richtung bestimmen, in die sich die Maus in ein Div bewegt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Wie erhält JavaScript die Richtung, in die sich die Maus in ein Div bewegt (Codebeispiel)?

Vor ein paar Tagen habe ich die Textbeschriftungen gesehen, die den Baidu-Bildern beigefügt sind. Es würde in der Richtung der Mausbewegung geladen werden, also wollte ich um eine solche Funktion zu implementieren. Nach einigem Suchen und Suchen habe ich zwei Implementierungsmethoden gefunden.

Methode 1: Verwenden Sie vier Divs, um einen Bereich zu bilden. Von welchem ​​Div aus Sie sich bewegen, ist die Richtung, aus der Sie sich bewegen.

Methode 2: Ermitteln Sie den Punkt, an dem sich die Maus bewegt, und welche Seite links, rechts, oben und unten am Div liegt. Die nächstgelegene Seite ist die Richtung, in die sich die Maus bewegt.

Für Methode zwei habe ich eine kleine Methode geschrieben. Der Code lautet wie folgt, nur als Referenz

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";
            }
    }
Nach dem Login kopieren

Das Obige ist eine vollständige Einführung, wie JavaScript die Richtung der Mausbewegung in a ermittelt div. Weitere Informationen zum JavaScript-Video-Tutorial finden Sie auf der chinesischen PHP-Website.


Das obige ist der detaillierte Inhalt vonWie erhält JavaScript die Richtung, in die sich die Maus in ein Div bewegt (Codebeispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:lvyestudy.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage