مثال بسيط على كتابة تأثير قناع شفاف في جافا سكريبت

يتم تحقيق تأثير طبقة القناع الشفافة بشكل أساسي باستخدام المكونات الإضافية. اسمحوا لي أن أشارككم استخدام JS الأصلي لتحقيق تأثير قناع شفاف. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون من المفيد لك أن تكون على دراية بـ JS الأصلي.

 <viv> <h4> <span> سجل الآن </span> <span> إغلاق </span> </h4> <p> <blable> اسم المستخدم </label> <type type = "text" onMouseover = "this.style.border = '1px solid #f60'" onfoucs = "this.style.border = '1px #f60'" onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <blabe> كلمة المرور </label> <input type = "password" onMouseover = "this.style.border = '1px solid #f60'" onfoucs = "this.style.border = '1px #f60" " onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <priment type = "president" value = "register"/> <input type = "reset" value = "reset"/> </p> </p> </fiv> </viv> <! document.getElementById ("Alert") ؛ var mymask = document.getElementById ('mask') ؛ var reg = document.getElementById ("content"). getElementsByTagName ("a") [0] ؛ var mclose = document.getElementById ("Close") ؛ 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 = "Hidden" ؛ } mclose.onclick = function () {myalert.style.display = "none" ؛ mymask.style.display = "none" ؛ } </script> </body> </html>

غطاء ملء الشاشة

 <! doctype html> <style> #mask {الموضع: ثابت ؛ العرض: 100 ٪ ؛ أعلى: 0px ؛ اليسار: 0px ؛ _position: مطلق ؛ _top: التعبير (documentElement.scrolltop) ؛ الخلفية: RGBA (0،0،0،0.5) ؛ الخلفية: شفافة/9 ؛ Filter: ProgID: dximagetransform.microsoft.gradient (StartColorstr =#80000000 ، endColorstr =#80000000) ؛ العرض: none ؛}#mask_td {text-align: center ؛} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> متصفح var isie = navigator.useragent.match (/msie (/d)/i) ؛ isie = isie؟ isie [1]: isie ؛ img = document.getElementById ("img") ؛ Mask = document.getElementById ("Mask") ؛ Mask.td = document.getElementById ("Mask_td") ؛ mask.style.width = de.clientwidth+"px" mask.style.height = de.clientheight+"px" mask.style.height = de.clientheight+"px" ؛ ] .style.overflow = "Hidden" ؛ // حساب حجم قناع mask.setsize () ؛ // show mask.style.display = isie == 6؟ "block": "table" ؛} ؛ // إضافة طريقة إخفاء mask.hide = function () {// show page scrollbar document [isie <9؟ // مسح المحتوى داخل mask.td.innerhtml = "" ؛ // إخفاء mask.style.display = "none" ؛} ؛ // إضافة طريقة إلحاق mask.append = function (e) {// إضافة محتوى في القناع td ، أنت mask.td.appendchild (e) ؛ (e.target || // قم بتعيين عنوان الصورة O.Src = img.src ؛ // إضافة content Mask.Append (o) ؛ // show mask mask.show () ؛} ؛ </script>