يتم استخدام هذا التأثير بشكل متكرر ، وغالبًا ما يسألني الناس هذا السؤال ، لذلك يجب أن أكتبه في مقال. في المرة القادمة يسأل شخص ما ، فقط رمي عنوان URL لهذا المقال. هذا التأثير بسيط للغاية ، لذلك لن أشرح ذلك كثيرًا. إذا نظرت إلى تعليقات الكود بالتفصيل ، فسوف تفهمها. فيما يلي كل الكود ، والذي يمكن تشغيله عن طريق نسخه إلى 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>لا توجد صعوبة في هذا التأثير ، وربما أصعب الأمر هو التنفيذ الشفاف. يمكن لكل من عتامة CSS3 و Alpha of IE تحقيق الشفرة ، ولكن هذا هو شفافية العنصر بأكمله. يعني استخدام هذه الطريقة أن عناصر الطفل شفافة أيضًا ، لذلك يتعين علينا ضبط الشفافية على الخلفية ، وليس العنصر بأكمله. في CSS3 ، يمكنك استخدام RGBA مباشرة لتعيينه. لا توجد طريقة من هذا القبيل في IE ، ولكن يمكنك استخدام مرشح التدرج بدلاً من ذلك ، لأن مرشحات التدرج تدعم أيضًا الشفافية. أيضًا ، في IE9 ، يتوافق مع كل من شفافية CSS3 وشفافية المرشح. إذا تم استخدام كلاهما ، فستكون شفافية الصفحة غير صحيحة. لذلك قمنا بحظر أحد الآثار الشفافة في IE9.
مشكلة أخرى هي أنها متوافقة مع IE6. لا يدعم IE6 ثابتًا ، لذلك نحتاج إلى استخدام أعلى المطلق والمعيين ديناميكيًا لتكون متوافقة معها. ثم هناك مشكلة حساب حجم القناع. هناك أيضا فرق المتصفح. في الواقع ، فإن اختلاف المتصفح في هذا التأثير كبير جدًا ، ولكن عندما ترى بعض المشكلات الصغيرة ، سوف تفهم أنه لا توجد حاجة للحديث عنها بطريقة طويلة.