jquery melaksanakan lapisan yang digantung

Dalam pembangunan web, lapisan terapung ialah reka bentuk interaksi biasa, yang boleh menjadikan pengalaman halaman lebih lancar dan lebih baik. Dengan jQuery, kita boleh dengan mudah melaksanakan kesan lapisan terapung yang mudah.

1. Struktur HTML

Pertama, kita memerlukan tag div yang mengandungi kandungan lapisan terapung dan tetapkan atribut gayanya display kepada none untuk disembunyikan ia berdiri. Tambah butang lain yang mencetuskan paparan lapisan terapung, seperti teg button.

Kod halaman HTML adalah seperti berikut:

<div id="float_box" style="display: none;">
    <!-- 悬浮层内容 -->
</div>
<button id="show_float_box">显示悬浮层</button>

2. Gaya CSS

Untuk membuat lapisan terapung terapung di atas halaman, kami perlu menggunakan CSS untuk menetapkannya position: fixed Properties. Pada masa yang sama, kita perlu menentukan lokasi dan saiz lapisan yang digantung dan sifat lain.

Kod gaya CSS adalah seperti berikut:

#float_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

Di sini, kami menetapkan lapisan terapung untuk dipusatkan secara menegak dan mendatar, menggunakan fungsi translate untuk mencapai pemusatan mendatar dan menegak . Atribut z-index digunakan untuk mentakrifkan perhubungan hierarki untuk memastikan lapisan terapung mempunyai tahap tertinggi pada halaman.

3. Implementasi JavaScript

Selepas halaman dimuatkan, kita perlu menambah acara click pada butang supaya lapisan terapung boleh dipaparkan selepas mengklik butang . Di sini kami menggunakan kaedah click jQuery untuk mengikat acara.

Untuk membuat lapisan terapung muncul, kita perlu menggunakan kaedah show jQuery. Kita boleh meningkatkan kesan animasi paparan dengan menetapkan atribut duration. Kita boleh menggunakan kaedah fadeOut untuk menambah kesan animasi keluar pada lapisan terapung Apabila kita mengklik butang tutup pada lapisan terapung atau klik pada kawasan kosong di luar lapisan terapung, lapisan terapung akan keluar secara automatik.

Kod JavaScript dilaksanakan seperti berikut:

$(document).ready(function () {
    // 显示悬浮层
    $("#show_float_box").click(function () {
        $("#float_box").show(300);
    });

    // 悬浮层退出
    $("#float_box .close-btn").click(function () {
        $("#float_box").fadeOut(200);
    });

    $(document).click(function (event) {
        if (!$(event.target).closest("#float_box").length) {
            $("#float_box").fadeOut(200);
        }
    });
});

Kami mentakrifkan peristiwa klik #show_float_box dan butang tutup .close-btn supaya lapisan terapung boleh keluar selepas mengklik butang tutup. Pada masa yang sama, kami menggunakan $(document).click untuk menambah fungsi klik di luar kandungan lapisan terapung untuk keluar dari lapisan terapung.

Akhir sekali, kami menyelesaikan pelaksanaan lapisan terapung.

Ringkasan:

Melalui langkah di atas, kita boleh mencapai kesan lapisan terampai yang mudah. Mula-mula kita perlu mencipta struktur HTML dan mereka bentuk gaya CSS untuk lapisan terapung Akhirnya, kita menggunakan jQuery untuk mengawal kod JavaScript untuk memaparkan dan keluar dari lapisan terapung. Pelaksanaan lapisan terapung sangat praktikal dalam pembangunan web, kerana ia dapat memberikan pengguna pengalaman yang lebih selesa.

Atas ialah kandungan terperinci jquery melaksanakan lapisan yang digantung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!