Wie erkennt man Kollisionen zwischen Elementen in jQuery/JavaScript?

jQuery/JavaScript-Kollisionserkennung

Identifizieren überlappender Elemente

Zu wissen, wann sich zwei Elemente überlappt haben, ist für verschiedene interaktive Webanwendungen von entscheidender Bedeutung. Stellen Sie sich ein einfaches Spiel vor, bei dem sich zwei farbige Kästchen senkrecht auf einem Gitter bewegen. Um festzustellen, ob das rote Kästchen mit einem der anderen Kästchen kollidiert ist, können Sie die folgende jQuery/JavaScript-Lösung verwenden:

Funktionsaufschlüsselung

getPositions: Ruft die Position ab und Abmessungen eines Elements.

comparePositions: Vergleicht die Bereiche von zwei gegebene Positionen und gibt true zurück, wenn sie sich überlappen oder berühren.

Überlappungen: Die Hauptfunktion prüft auf Überlappungen zwischen zwei Elementen. Es verwendet getPositions und comparePositions, um zu bestimmen, ob sich eine ihrer Achsen überlappt.

Implementierung

1. Definieren Sie die Überlappungen Funktion als Abschluss.
2. Ermitteln Sie die Positionen der beiden Elemente wird überprüft.
3. Vergleichen Sie die horizontalen und vertikalen Bereiche beider Elemente mit comparePositions.
4. Gib true zurück, wenn sich einer der Bereiche überschneidet.

Beispiel

Bedenken Sie den HTML-Code Struktur:

<div>

Und das entsprechende JavaScript:

var overlaps = (function () {
  // ... same as before ...
})();

$(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);
});

Dieses Skript hängt Nachrichten an die Seite an, die angeben, ob sich das rote Kästchen mit einem der anderen Kästchen überschneidet.

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