jquery meninggalkan slaid untuk dipadam

Dalam pembangunan aplikasi web moden, reka bentuk interaksi selalunya merupakan bahagian yang penting. Salah satu penentu pengalaman pengguna yang baik ialah bentuk interaksi yang sesuai.

Antaranya, Leret-untuk-Padam digunakan secara meluas untuk memadam elemen seperti item senarai atau kad. Contohnya, memadamkan e-mel dalam aplikasi mel, atau memadam kemas kini dalam aplikasi rangkaian sosial, dsb.

Dalam pembangunan web tradisional, melaksanakan pemadaman leret ke kiri biasanya memerlukan banyak pemprosesan manual operasi DOM dan kawalan gaya. Tetapi kini, pustaka acara dan animasi yang disediakan oleh jQuery telah sangat memudahkan dan memperkayakan cara untuk melaksanakan leret ke kiri untuk memadam.

Seterusnya, kami akan menggunakan jQuery untuk melaksanakan kesan pemadaman leret kiri yang mudah.

1. Mencapai interaksi asas

Pertama, dalam halaman HTML, kita perlu menentukan elemen bekas yang mengandungi item senarai dan menambah elemen blok yang mengandungi butang padam padanya . Ikon padam yang disediakan oleh perpustakaan ikon fon FontAwesome digunakan di sini dan beberapa gaya asas perlu ditambahkan pada butang padam:

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete"> <i class="fa fa-trash"></i> </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

Kod di atas mentakrifkan bekas item senarai dengan ketinggian 50 piksel, yang mengandungi elemen span (digunakan untuk memaparkan kandungan item senarai) dan elemen butang padam. Elemen bekas mempunyai set overflow:hidden atribut untuk menyembunyikan elemen butang padam. Elemen butang padam ditetapkan dengan kedudukan mutlak dan offset negatif di sebelah kanan untuk mencapai kesan animasi apabila meluncur ke kiri untuk memadam.

Seterusnya, tambahkan pemantauan acara sentuhan tetikus jQuery untuk elemen butang padam untuk mengendalikan logik pemadaman leret ke kiri. Disebabkan oleh pelaksanaan pemadaman leret kiri, pada asasnya jarak pergerakan tetikus menyebabkan kedudukan butang padam berubah, jadi peristiwa pergerakan tetikus perlu dipantau.

$(document).on("mousemove swipeleft",".list-item",function(e){
    var $delete = $(this).find('.delete');
    var left = e.pageX - $(this).offset().left;   
    if (left > $(this).width()/2) {
        $delete.css('right', 0);
    } else {
        $delete.css('right', '-50px');
    }
});

Dalam kod di atas, kami menggunakan kaedah on() jQuery untuk mendengar pergerakan tetikus dan peristiwa sentuhan (peristiwa slaid kiri). Kemudian dapatkan jarak tetikus berbanding sebelah kiri elemen, dan tentukan kedudukan butang padam berdasarkan separuh lebar elemen: jika jarak pergerakan tetikus melebihi separuh lebar elemen, animasi offset kanan daripada elemen butang padam beralih kepada 0, sebaliknya ke kanan Animasi mengimbangi beralih kepada -50px untuk meluncur butang padam ke dalam elemen.

2. Tambah operasi pemadaman

Selepas memproses interaksi leret kiri untuk memadam, anda juga perlu mempertimbangkan cara melaksanakan logik operasi pemadaman. Cara mudah untuk mencapai ini adalah dengan menggunakan kaedah remove() jQuery untuk memadam elemen. Pelaksanaan di sini adalah untuk menambah pendengar acara klik selepas slaid yang betul untuk dipadam dicetuskan, di mana elemen dialih keluar daripada pepohon DOM dengan memanggil kaedah remove().

$(document).on("click",".delete",function(e){
    e.stopPropagation();
    $(this).parent().remove();
});

Dalam kod di atas, kami menggunakan kaedah stopPropagation() jQuery untuk menghalang peristiwa klik daripada menggelegak ke elemen induk dan menjejaskan pemantauan pemadaman leret ke kiri.

3. Kod lengkap

Akhir sekali, dengan menggabungkan dua bahagian kod di atas, kita boleh mendapatkan kod pelaksanaan pemadaman slaid kiri jQuery yang lengkap.

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete">
        <i class="fa fa-trash"></i>
    </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("mousemove swipeleft",".list-item",function(e){
        var $delete = $(this).find('.delete');
        var left = e.pageX - $(this).offset().left;   
        if (left > $(this).width()/2) {
            $delete.css('right', 0);
        } else {
            $delete.css('right', '-50px');
        }
    });

    $(document).on("click",".delete",function(e){
        e.stopPropagation();
        $(this).parent().remove();
    });
</script>

Kod ini hanyalah contoh mudah pemadaman leret kiri jQuery Ia tidak termasuk pemprosesan terperinci dan pengoptimuman kesesuaian Pembaca boleh membuat pengubahsuaian dan sambungan yang sesuai mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci jquery meninggalkan slaid untuk dipadam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!