بالنسبة لمطوري تطبيقات الويب ، إذا كان برنامج الخلفية يتعامل مع البرنامج لفترة طويلة عندما يتصفح المستخدم الواجهة ، فسينتظر المستخدم وقتًا أطول على صفحة الويب ، ولكن إذا لم يكن هناك طريقة موجهة أكثر ودية على الصفحة
(أضف لزيادة تأثير الغبار) ، فلن تكون تجربة المستخدم جيدة بشكل خاص. لا يعرف المستخدمون ما إذا كان ينبغي عليهم النقر على برامج أخرى الآن ، ولا يعرف المستخدمون ما إذا كان ينبغي عليهم متابعة انتظار صفحة الويب ، أو يمكنهم النقر على صفحات أخرى.
هناك تفاعل جيد نسبيًا الآن ، وهو زيادة تأثير الغبار. مثل إطار عمل extJs ، توفر وظائف Mask () و inmask () من extJs تأثير رمادي ، وبالطبع توفر jQuery هذه الطريقة الرمادية. هنا يأمل المؤلف أن يتمكن من ذلك
استخدم JS الأصلي لتحقيق تأثير الرمادي الخاص بك. لذلك جربت نفسي. حقق تأثير الغبار. أنا هنا أركز فقط على التنفيذ. لم أقم بتعديل الكثير عن جماليات الصفحة ، وبالتالي فإن الصفحة ليست جميلة جدًا. انشر رمز التنفيذ هنا.
عرض شظايا الرمز المستمدة من شظايا الرمز الخاص بي على الرمز
<! doctype html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <head> new document </title> <meta name = "generator" content = "editplus"> meta name = "effect" content = "" type = "text/css"> .maskstyle {background-color:#b8b8b8 ؛ Z-index: 1 ؛ مرشح: ألفا (عتامة = 50) ؛ العتامة: 0.8 ؛ الموقف: مطلق ؛ محاذاة النص: المركز ؛ اللون: الأزرق. الخط: BOLD 1EM "安体" ، Arial ، Times ؛ الارتفاع: 25 بكسل ؛ خط الرصيف: جريئة ؛ الفائض: مخفي. } </style> </head> <script type = "text/javaScript"> function creatmmasklayer (effectItem ، showtext) {divitem = document.createElement ("div") ؛ divitem.className = "Maskstyle" ؛ divitem.style.lineheight = effectItem.OffSetheight+"px" ؛ divitem.innertext = showtext ؛ divitem.style.width = effectItem.OffSetWidth ؛ divitem.style.height = effectItem.OffSetheight ؛ divitem.style.top = effectIm.OffSettop ؛ divitem.style.left = effectItem.OffSetLeft ؛ إرجاع Divitem. } وظيفة setmask () {var effectItem = document.getElementById ("test") ؛ var expressingkitem = findMaskItem (effectItem) ؛ if (arugmaskitem) {return ؛ } var showtext = "loading ..." ؛ effectItem.AppendChild (CreatMaskLayer (effectItem ، showtext)) ؛ } دالة removeMask () {var effectItem = document.getElementById ("test") ؛ var maskitem = findmaskitem (effectItem) ؛ if (maskitem) {effectIm.removechild (Maskitem) ؛ }} findmaskitem (item) {var children = item.Children ؛ لـ (var i = 0 ؛ i <knider.length ؛ i ++) {if ("maskstyle" == (الأطفال [i] .className)) {return children [i] ؛ }}} </script> <body> <input type = "button" value = "agganed" onClick = "setmask ()"/> <input type = "button" value = "coulded" onClick = "removemask () value = "اختبار ما إذا كان يمكنك النقر فوق" onClick = "Alert ('OK!')"/> </viv> </body> </html>اشرح الأجزاء المهمة من الكود.
.Maskstyle هو نمط طبقة رمادية
في
عرض شظايا الرمز المستمدة من شظايا الرمز الخاص بي على الرمز
مرشح: ألفا (عتامة = 50) ؛ العتامة: 0.8 ؛
إنه يمثل شفافية الطبقة الرمادية ، وسمة المرشح ستكون متوافقة مع متصفح IE8.
تضع خاصية Z-Index ترتيب التراص للعناصر. ستكون العناصر ذات ترتيب تكديس أعلى دائمًا أمام العناصر ذات ترتيب تكديس أقل.
ملاحظة: يجب أن يكون تأثير الغبار يتراجع إلى عنصر ليتم وضعه في Div