Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > jquery melaksanakan lapisan yang digantung

jquery melaksanakan lapisan yang digantung

王林
Lepaskan: 2023-05-08 20:38:06
asal
762 orang telah melayarinya

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>
Salin selepas log masuk
  1. 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;
}
Salin selepas log masuk

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.

  1. 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);
        }
    });
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan