Efek lapisan topeng transparan pada dasarnya dicapai dengan menggunakan plug-in. Izinkan saya berbagi dengan Anda penggunaan JS asli untuk mencapai efek topeng tembus cahaya. Teman yang tertarik dapat merujuknya. Saya harap akan membantu Anda untuk terbiasa dengan JS asli.
<SEV> <H4> <SPANT> Daftar sekarang </span> <span> tutup </span> </h4> <p> <label> nama pengguna </label> <input type = "text" onmouseOver = "this.style.border = '1px solid #f60'" onfoUcs = "this.style.border = '1px #f60'" onfoUcs = "this.style.border = '1px #f60'" OnfoUcs = "this.style.border = '1px Onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <p> <per label> Kata sandi </label> <input type = "password" onmouseOver = "this.style.border = '1px solid #f60'" onfoucs = "this.style.border = '1px = f60'" Onfoucs = "this.style.border = '1px =' 1px" "" "1px" " Onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <input type = "kirim" value = "register"/> <input type = "reset" value = "reset"/> </p> </div> </div> <!-lapisan my-mask-> </p> </div> </div> <! document.geteLementById ("waspada"); var mymask = document.geteLementById ('mask'); var reg = document.geteLementById ("konten"). getElementsbyTagname ("a") [0]; var mclose = document.getElementById ("tutup"); Reg.onClick = function () {mymask.style.display = "block"; myalert.style.display = "block"; myalert.style.position = "absolute"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "tersembunyi"; } mclose.onClick = function () {myalert.style.display = "none"; mymask.style.display = "none"; } </script> </body> </html>Penutup layar penuh
<! Doctype html> <tyle> #mask {position: fixed; width: 100%; Atas: 0px; kiri: 0px; _Posisi: absolut; _top: ekspresi (DocumentElement.scrolltop); Latar Belakang: RGBA (0,0,0,0,5); Latar Belakang: Transparan/9; Filter: progid: dximagetransform.microsoft.gradient (startColorStr =#80000000, endColorStr =#80000000); Tampilan: Tidak Ada;}#mask_td {Text-align: center;} </tyle> <img src = "http://web-tinker.com/images/themagicconco.jpg" id = "img"/> <table id = "mask"> <tr> <td id = "mask_td" <tabel> </tabel </ttr> <tr> <tr> <td iD = "mask_td"/tabel </tabel </TROUSER </TROUSER </TROUSER </TROURTD "<TROWR" <TACKER/<TREWSER/TRICKER/TACKRET/<TACKER " var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // menyatakan variabel var img, mask; // dapatkan elemennya img = document.geteLementById ("img"); mask = document.geteLementById ("mask"); mask.td = document.geteLementById ("mask_td"); // Hitung ukuran mask mask. mask.style.width = de.clientwidth+"px" mask.style.height = de.clientHeight+"px" mask.style.height = de.clientheight+"px";}; // Dokumen acara mask. ] .style.overflow = "tersembunyi"; // Hitung ukuran mask mask. // tunjukkan mask.style.display = isie == 6? "Block": "tabel";}; // Tambahkan Metode Sembunyikan mask.hide = function () {// Tampilkan halaman scrollbar halaman [ISIE <9? "DocumentElement": "Body"] .style.overflow = ""; // Bersihkan konten di dalam mask.td.innerhtml = ""; // Sembunyikan mask.style.display = "none";}; // tambahkan metode append mask.appling = function (e) {// tambahkan konten dalam topeng td, Anda mask.td.appendChild (e);}; // klik mask untuk menutup mask. (E.Target || e.srcelement) == mask.td && mask.hide ();}; // Tambahkan ukuran mask saat ukuran bentuk mengubah window.onresize = function () {mask.setsize ();}; // Klik gambar gambar IMG.ONCLICK = function () {) {);}; // Klik gambar gambar img.onClick = function () {) {/); // atur alamat gambar o.src = img.src; // tambahkan konten mask.append (o); // tunjukkan mask mask.show ();}; </script>