Comment détecter les collisions entre les éléments jQuery ?-js tutoriel-php.cn

How do you detect collisions between jQuery `` elements?

Détection de collision entre les éléments jQuery Div

La détection de collisions entre éléments est une tâche fondamentale dans de nombreuses applications Web. Dans ce cas, l'objectif est de déterminer si deux

des éléments, représentés par des cases colorées, sont entrés en collision tout en se déplaçant perpendiculairement les uns aux autres.

Une approche efficace pour résoudre ce problème consiste à tirer parti de la fonction chevauchements fournie ci-dessous :

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

Copier après la connexion

Cette fonction prend deux

éléments en tant que paramètres et renvoie une valeur booléenne indiquant s'ils se chevauchent en fonction de leurs positions et dimensions. La fonction récupère d'abord la position et la taille de chaque élément, puis compare leurs plages le long des axes x et y. Il renvoie vrai s'il y a un chevauchement dans les deux sens.

Pour démontrer l'utilisation de cette fonction, vous pouvez créer un ensemble de

éléments de votre document HTML, stylisez-les sous forme de zones et attribuez-leur des identifiants uniques pour les identifier. Ensuite, dans un script jQuery, vous pouvez appeler la fonction overlaps pour vérifier les collisions entre ces cases. Le code suivant fournit un exemple :

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

Copier après la connexion

Dans cet exemple, une boîte rouge nommée "Red box" est créée et déplacée à l'aide de la souris. Plusieurs autres cases intitulées « Box 1 » à « Box 4 » sont positionnées à différents endroits dans la division « zone ». Le script jQuery vérifie les collisions entre la "boîte rouge" et chacune des autres cases et affiche les résultats dans une série de

éléments.

En utilisant la fonction chevauchements, vous pouvez implémenter efficacement la détection de collision pour jQuery

éléments, permettant des interactions dynamiques et une gestion des collisions en temps réel dans vos applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Comment conserver les variables JavaScript sur plusieurs pages Web ? Article suivant：Comment utiliser express-validator comme middleware dans Express App

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2239

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2379

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1989

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...