Rumah > Artikel > hujung hadapan web > topeng jquery hilang selepas tiga saat
topeng jquery hilang selepas tiga saat
- 王林asal
- 2023-05-25 10:51:07532semak imbas
Dalam pembangunan laman web, perpustakaan JavaScript jQuery sering digunakan untuk mencapai pelbagai kesan interaktif. Antaranya, kesan interaktif lapisan topeng juga sangat biasa. Lapisan topeng ialah lapisan topeng separa lutsinar yang meliputi halaman untuk memaksa pengguna mengendalikan tugas interaksi lapisan semasa sebelum berinteraksi dengan halaman. Dalam proses pelaksanaan khusus, kita boleh menggunakan kaedah fadeOut() jQuery untuk mencapai kesan lapisan topeng hilang secara automatik selepas tiga saat.
Mari kita pelajari dahulu tentang kaedah fadeOut(). Kaedah ini digunakan untuk memudar secara beransur-ansur elemen padanan dan semua adik-beradiknya, akhirnya hilang. Kaedah ini berfungsi dengan menukar kelegapan elemen. Kaedah fadeOut() jQuery mempunyai beberapa parameter pilihan, yang paling biasa digunakan ialah parameter konfigurasi kelajuan, yang digunakan untuk menentukan bilangan milisaat masa kesan. Apabila nilai parameter kelajuan ialah "perlahan", "cepat" atau nilai milisaat tertentu, kesan fade out mempunyai kelajuan larian yang berbeza. Di samping itu, jQuery juga menyediakan beberapa parameter tambahan lain, seperti pelonggaran untuk mencapai kesan pelonggaran yang berbeza, dan parameter lengkap untuk melaksanakan fungsi panggil balik selepas fadeout selesai.
Sekarang mari tulis kod jQuery yang melaksanakan lapisan topeng untuk hilang secara automatik selepas tiga saat, termasuk HTML lapisan topeng. Pertama, anda perlu menentukan fail HTML, termasuk lapisan topeng dan kawasan kandungan untuk ujian. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 三秒后遮罩消失</title>
<style type="text/css">
#mask{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
text-align: center;
z-index: 9999;
display: none;
}
#content{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
background:#ddd;
color:#333;
width:200px;
height:100px;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div id="mask">
<div id="content">这是一个测试内容区域</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>Dalam teg kepala, kami mentakrifkan dua gaya CSS #mask dan #kandungan, masing-masing menghidupkan lapisan topeng dan mentakrifkan gaya kawasan kandungan untuk ujian. Antaranya, #mask menetapkan kedudukan kepada mutlak, menjadikannya memaparkan skrin penuh dan reka letak di peringkat atas. Latar belakang adalah rgba(0,0,0,.5) hitam lut sinar. Atribut penjajaran teks memusatkan kawasan kandungan. Atribut indeks-z menetapkan tahap lapisan topeng, lebih tinggi daripada elemen lain halaman web. Atribut paparan menetapkan keadaan lalai lapisan topeng Keadaan awal tidak dipaparkan, menunggu skrip jQuery mengawal paparannya. Gaya #content direka bentuk untuk menduduki kawasan kandungan ujian di tengah lapisan topeng Ia adalah definisi gaya tulen dan tidak menjejaskan pelaksanaan JavaScript.
Sekarang, kita perlu menulis skrip jQuery untuk mengawal penampilan dan kehilangan lapisan topeng. Kami menggunakan kaedah setTimeout() jQuery untuk mencetuskan kaedah fadeOut() lapisan topeng selepas tiga saat untuk mencapai kesan hilang topeng. Kodnya adalah seperti berikut:
<script type="text/javascript">
$(document).ready(function(){
$("#mask").fadeIn(); //控制遮罩层的显示
setTimeout(function(){
$("#mask").fadeOut(); //控制遮罩层的隐藏
},3000);
});
</script>Kod jQuery di atas adalah jelas dan ringkas Pertama, gunakan kaedah fadeIn() untuk mengawal paparan lapisan topeng selepas dokumen siap. Kaedah setTimeout() mengambil fungsi dan parameter masa, dan fungsi itu dilaksanakan selepas masa yang ditentukan. Di sini, kami menetapkan masa selama tiga saat, dan apabila masa tamat, laksanakan kaedah fadeOut() untuk memudar lapisan topeng secara beransur-ansur dan akhirnya menyembunyikannya. Ambil perhatian bahawa kaedah fadeOut() boleh menggunakan parameter kelajuan untuk menentukan tempoh kesan fadeout, tetapi dalam kes ini, ia tidak perlu untuk menerangkan secara terperinci.
Selepas melengkapkan kod di atas, anda boleh menjalankan kod ini dalam penyemak imbas dan melihat lapisan topeng muncul pada halaman dan hilang secara automatik selepas tiga saat. Anda boleh membenamkan kod ke dalam mana-mana halaman HTML untuk membuat lapisan topeng hilang secara automatik selepas halaman dipunggah.
Untuk meringkaskan, jQuery boleh membantu kami merealisasikan pelbagai kesan halaman web dengan cepat dan mudah, sebagai kesan interaktif biasa, terutamanya yang biasa digunakan dalam pembangunan tapak web. Dalam artikel ini, kami menggunakan kaedah fadeOut() jQuery dan kaedah setTimeout() untuk mencapai kesan lapisan topeng hilang secara automatik selepas tiga saat. Ini bukan sahaja memberikan kami kaedah pelaksanaan yang mudah dan mudah, tetapi juga menunjukkan penggunaan jQuery yang fleksibel dalam pembangunan laman web.
Atas ialah kandungan terperinci topeng jquery hilang selepas tiga saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!