Untuk pengembang aplikasi web, jika program latar belakang menangani program untuk waktu yang lama ketika pengguna menelusuri antarmuka, pengguna akan menunggu waktu yang lebih lama di halaman web, tetapi jika tidak ada metode prompt yang lebih ramah pada halaman
(Tambahkan untuk meningkatkan efek debu), maka pengalaman pengguna tidak akan terlalu baik. Pengguna tidak tahu apakah mereka harus mengklik program lain sekarang, dan pengguna tidak tahu apakah mereka harus terus menunggu halaman web, atau mereka dapat mengklik halaman lain.
Ada interaksi yang relatif baik sekarang, yaitu untuk meningkatkan efek debu. Seperti kerangka kerja EXTJS, fungsi mask () dan unmask () dari extjs memberikan efek beruban, dan tentu saja jQuery juga menyediakan metode keluaman ini. Di sini penulis berharap dia bisa
Gunakan JS Native untuk mencapai efek keluasan Anda sendiri. Jadi saya mencoba sendiri. Mencapai efek debu. Di sini saya hanya berfokus pada implementasi. Saya belum menyesuaikan banyak tentang estetika halaman, jadi halamannya tidak terlalu indah. Posting kode implementasi di sini.
Lihat fragmen kode yang diturunkan ke fragmen kode saya pada kode
<! Doctype html public "-// w3c // dtd html 4.0 transisi // en"> <html> <head> <title> dokumen baru </iteme> <meta name = "generator" content = "editplus"> <meta name = "penulis" konten = "" "<meta name =" content "content" "" "" "" "" "" "" "" "" "" "" "content" content "content" content "content" content "content" " type = "text/css"> .maskstyle {background-color:#b8b8b8; z-index: 1; filter: alpha (opacity = 50); Opacity: 0.8; Posisi: Absolute; Teks-Align: tengah; Warna: Biru; Font: tebal 1em "安体", Arial, kali; Tinggi: 25px; font-weight: tebal; meluap: tersembunyi; } </tyle> </head> <script type = "text/javaScript"> function createMasklayer (EffectItem, showText) {divitem = document.createElement ("div"); divitem.classname = "maskstyle"; divitem.style.lineHeight = EffectItem.OffsetHeight+"px"; divitem.innerText = showText; divitem.style.width = EffectItem.offsetWidth; divitem.style.height = EffectItem.offsetHeight; divitem.style.top = EffectItem.offsettop; divitem.style.left = EffectItem.offsetleft; mengembalikan divitem; } function setMask () {var EffectItem = document.getElementById ("test"); var existskitem = findmaskitem (EffectItem); if (existskitem) {return; } var showText = "memuat ..."; EffectItem.AppendChild (CreatmaskLayer (EffectItem, ShowText)); } function removemask () {var EffectItem = document.getElementById ("test"); var maskitem = findmaskitem (EffectItem); if (maskitem) {EffectItem.removechild (maskitem); }} fungsi findmaskitem (item) {var anak -anak = item.children; untuk (var i = 0; i <anak -anak. }}} </script> <body> <input type = "Tombol" value = "dibatalkan" OnClick = "setMask ()"/> <input type = "Tombol" value = "dibatalkan" ontClick = "removemask ()"/<br> <v id = "test" style = "border: 1px padat; width: 300px; value = "uji apakah Anda dapat mengklik" onClick = "waspada ('ok!')"/> </div> </body> </html>Jelaskan bagian penting dari kode.
.maskstyle adalah gaya lapisan abu -abu
di dalam
Lihat fragmen kode yang diturunkan ke fragmen kode saya pada kode
filter: alpha (opacity = 50); Opacity: 0.8;
Ini mewakili transparansi lapisan abu -abu, dan atribut filter harus kompatibel dengan browser IE8.
Properti Z-Index menetapkan urutan elemen susun. Elemen dengan urutan susun yang lebih tinggi akan selalu berada di depan elemen dengan urutan penumpukan yang lebih rendah.
PS: Efek debu harus debu menjadi elemen yang akan ditempatkan di div