Wie erkennt man Kollisionen zwischen jQuery-Elementen?-js-Tutorial-php.cn

How do you detect collisions between jQuery `` elements?

Kollisionserkennung zwischen jQuery-Div-Elementen

Das Erkennen von Kollisionen zwischen Elementen ist eine grundlegende Aufgabe in vielen Webanwendungen. In diesem Fall besteht das Ziel darin, festzustellen, ob zwei spezifische

Elemente, die als farbige Kästchen dargestellt werden, sind kollidiert, während sie sich senkrecht zueinander bewegten.

Ein wirksamer Ansatz zur Lösung dieses Problems besteht darin, die unten bereitgestellte Funktion Überlappungen zu nutzen:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

Nach dem Login kopieren

Diese Funktion benötigt zwei

Elemente als Parameter und gibt einen booleschen Wert zurück, der angibt, ob sie sich basierend auf ihren Positionen und Abmessungen überlappen. Die Funktion ruft zunächst die Position und Größe jedes Elements ab und vergleicht dann deren Bereiche entlang der x- und y-Achse. Es gibt „true“ zurück, wenn es in einer der beiden Richtungen eine Überlappung gibt.

Um die Verwendung dieser Funktion zu demonstrieren, können Sie einen Satz von

erstellen. Elemente in Ihrem HTML-Dokument, formatieren Sie sie als Boxen und weisen Sie ihnen zur Identifizierung eindeutige IDs zu. Anschließend können Sie innerhalb eines jQuery-Skripts die Funktion overlaps aufrufen, um nach Kollisionen zwischen diesen Feldern zu suchen. Der folgende Code liefert ein Beispiel:

$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

Nach dem Login kopieren

In diesem Beispiel wird ein rotes Feld mit dem Namen „Red Box“ erstellt und mit der Maus verschoben. Mehrere andere Boxen mit der Bezeichnung „Box 1“ bis „Box 4“ sind an verschiedenen Stellen im Bereich „Bereich“ positioniert. Das jQuery-Skript prüft auf Kollisionen zwischen der „roten Box“ und den anderen Boxen und zeigt die Ergebnisse in einer Reihe von

Elemente.

Durch die Verwendung der Funktion overlaps können Sie die Kollisionserkennung für jQuery

effektiv implementieren. Elemente, die dynamische Interaktionen und Kollisionsbehandlung in Echtzeit in Ihren Webanwendungen ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erkennt man Kollisionen zwischen jQuery-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie können Sie JavaScript-Variablen über mehrere Webseiten hinweg beibehalten? Nächster Artikel：So verwenden Sie Express-Validator als Middleware in der Express-App

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2275

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2409

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2026

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...