Rumah >hujung hadapan web >tutorial js >Bagaimanakah anda mengesan perlanggaran antara elemen jQuery ``?

Bagaimanakah anda mengesan perlanggaran antara elemen jQuery ``?

Mary-Kate Olsenasal: 2024-11-12 17:26:02984semak imbas

How do you detect collisions between jQuery `` elements?

Pengesanan Perlanggaran antara Elemen Div jQuery

Mengesan perlanggaran antara elemen ialah tugas asas dalam banyak aplikasi web. Dalam kes ini, objektifnya adalah untuk menentukan sama ada dua

elemen, diwakili sebagai kotak berwarna, telah berlanggar semasa bergerak secara berserenjang antara satu sama lain.

Satu pendekatan berkesan untuk menangani masalah ini ialah memanfaatkan fungsi tindih yang disediakan di bawah:

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

Fungsi ini mengambil masa dua

elemen sebagai parameter dan mengembalikan nilai boolean yang menunjukkan sama ada ia bertindih berdasarkan kedudukan dan dimensinya. Fungsi ini mula-mula mendapatkan semula kedudukan dan saiz setiap elemen dan kemudian membandingkan julatnya di sepanjang paksi-x dan paksi-y. Ia kembali benar jika terdapat pertindihan dalam mana-mana arah.

Untuk menunjukkan penggunaan fungsi ini, anda boleh mencipta set

elemen dalam dokumen HTML anda, gayakannya sebagai kotak dan berikan mereka ID unik untuk pengenalan. Kemudian, dalam skrip jQuery, anda boleh menggunakan fungsi tindih untuk menyemak perlanggaran antara kotak ini. Kod berikut memberikan contoh:

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

Dalam contoh ini, kotak merah bernama "Kotak merah" dicipta dan dialihkan menggunakan tetikus. Beberapa kotak lain yang berlabel "Kotak 1" hingga "Kotak 4" diletakkan di lokasi berbeza dalam div "kawasan". Skrip jQuery menyemak perlanggaran antara "Kotak Merah" dan setiap kotak lain dan memaparkan keputusan dalam satu siri

elemen.

Dengan menggunakan fungsi tindih, anda boleh melaksanakan pengesanan perlanggaran dengan berkesan untuk jQuery

elemen, membolehkan interaksi dinamik dan pengendalian perlanggaran masa nyata dalam aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah anda mengesan perlanggaran antara elemen jQuery ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery html Boolean if for while using function this position

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Anda Boleh Mengekalkan Pembolehubah JavaScript Merentasi Berbilang Halaman Web?Artikel seterusnya：Bagaimanakah Anda Boleh Mengekalkan Pembolehubah JavaScript Merentasi Berbilang Halaman Web?

Artikel berkaitan

Lihat lagi