Heim  >  Artikel  >  Web-Frontend  >  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)?

云罗郡主
云罗郡主nach vorne
2018-10-29 16:05:382129Durchsuche

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

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:lvyestudy.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen