Heim >Web-Frontend >js-Tutorial >Wie erkennt man Kollisionen zwischen Elementen in jQuery/JavaScript?

Wie erkennt man Kollisionen zwischen Elementen in jQuery/JavaScript?

Barbara Streisand
Barbara StreisandOriginal
2024-11-19 09:12:021038Durchsuche

How to Detect Collisions Between Elements 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!

Stellungnahme:
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