Efek ini sangat sering digunakan, dan orang -orang sering menanyakan pertanyaan ini, jadi saya harus menuliskannya ke dalam sebuah artikel. Lain kali seseorang bertanya, buang URL artikel ini. Efek ini sangat sederhana, jadi saya tidak akan menjelaskannya terlalu banyak. Jika Anda melihat komentar kode secara detail, Anda akan memahaminya. Berikut ini adalah semua kode, yang dapat dijalankan dengan menyalinnya ke HTML.
<! 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>Tidak ada kesulitan dalam efek ini, dan yang paling sulit mungkin adalah implementasi tembus cahaya. Baik opacity CSS3 dan Alpha of IE dapat mencapai tembus pandang, tetapi itu adalah transparansi dari seluruh elemen. Menggunakan metode itu berarti bahwa elemen anak juga tembus cahaya, jadi kita harus mengatur transparansi ke latar belakang, bukan seluruh elemen. Di CSS3, Anda dapat secara langsung menggunakan RGBA untuk mengaturnya. Tidak ada metode seperti itu di IE, tetapi Anda dapat menggunakan filter gradien sebagai gantinya, karena filter gradien juga mendukung transparansi. Juga, di IE9, kompatibel dengan transparansi CSS3 dan transparansi filter. Jika keduanya digunakan, transparansi halaman akan salah. Jadi kami memblokir salah satu efek transparan di IE9.
Masalah lain adalah kompatibel dengan IE6. IE6 tidak mendukung tetap, jadi kita perlu menggunakan Top yang absolut dan dinamis untuk kompatibel dengannya. Lalu ada masalah perhitungan ukuran mask. Ada juga perbedaan browser. Faktanya, perbedaan browser dalam efek ini cukup besar, tetapi ketika Anda melihat beberapa masalah kecil, Anda akan memahami bahwa tidak perlu membicarakannya dengan cara yang jauh.