เอฟเฟกต์เลเยอร์หน้ากากโปร่งแสงนั้นทำได้โดยใช้ปลั๊กอิน ให้ฉันแบ่งปันการใช้ JS ดั้งเดิมเพื่อให้ได้เอฟเฟกต์หน้ากากโปร่งแสง เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณที่จะคุ้นเคยกับ JS พื้นเมือง
<div> <h4> <pan> ลงทะเบียนตอนนี้ </span> <span> ปิด </span> </h4> <p> <p> <dable> ชื่อผู้ใช้ </label> <อินพุต type = "text" onMouseOver = "this.style.border = '1px solid #f60' onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <dlable> รหัสผ่าน </label> <อินพุต type = "รหัสผ่าน" onMouseOver = "this.style.border = '1px solid #f60' onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <อินพุต type = "ส่ง" value = "ลงทะเบียน"/> <อินพุต type = "รีเซ็ต" value = "รีเซ็ต"/> </p> </div> </div> </div> <! document.getElementById ("Alert"); var mymask = document.getElementById ('mask'); var reg = document.getElementById ("เนื้อหา"). getElementsByTagname ("a") [0]; var mclose = document.getElementById ("ปิด"); reg.onclick = function () {mymask.style.display = "block"; myalert.style.display = "block"; myalert.style.position = "สัมบูรณ์"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "ซ่อน"; } mclose.onclick = function () {myalert.style.display = "ไม่มี"; mymask.style.display = "ไม่มี"; } </script> </body> </html>ปกหน้าจอเต็มรูปแบบ
<! doctype html> <style> #mask {ตำแหน่ง: คงที่; ความกว้าง: 100%; ด้านบน: 0px; ซ้าย: 0px; _position: สัมบูรณ์; _top: นิพจน์ (DocumentElement.scrolltop); ความเป็นมา: RGBA (0,0,0,0.5); ความเป็นมา: โปร่งใส/9; ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr =#80000000, endColorSTR =#80000000); จอแสดงผล: ไม่มี;}#mask_td {text-align: center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask"> <tr> var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // ประกาศตัวแปร var img, หน้ากาก; // รับองค์ประกอบ img = document.getElementById ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementById ("mask_td"); // คำนวณขนาดของหน้ากาก mask.setsize = function () {// mask.style.width = de.clientWidth+"px" mask.style.height = de.clientheight+"px" mask.style.height = de.clientheight+"px";}; // เพิ่มวิธีการแสดงหน้ากาก ] .style.overflow = "ซ่อน"; // คำนวณขนาดของหน้ากากหน้ากาก Setsize (); // show mask.style.display = isie == 6? "block": "ตาราง";}; // เพิ่ม Hide Method Mask.hide = function () {// show page scrollbar document [isie <9? "documentElement": "body"] .style.overflow = ""; // ล้างเนื้อหาภายใน mask.td.innerhtml = ""; // ซ่อน mask.style.display = "ไม่มี";}; // เพิ่มวิธีการผนวกหน้ากาก. Append = function (e) {// เพิ่มเนื้อหาในหน้ากาก td คุณ mask.td.appendchild (e);}; // คลิกหน้ากากปิด mask.onclick = ฟังก์ชั่น (e) (e.target || e.srencement) == mask.td && mask.hide ();}; // เพิ่มขนาดของหน้ากากเมื่อขนาดของรูปแบบเปลี่ยนหน้าต่าง onResize = function () {mask.setsize ();}; // คลิกภาพเหตุการณ์ img.onclick = ฟังก์ชัน // ตั้งค่าที่อยู่รูปภาพ o.src = img.src; // เพิ่ม mask content.append (O); // show mask mask.show ();}; </script>