قناع شفاف بسيط بملء الشاشة (lightBox)

الكاتب：Eve Cole وقت التحديث：2010-06-09 17:08:28

منذ وقت ليس ببعيد، أرسل لي أحد مستخدمي الإنترنت الذي كان على وشك التخرج بريدًا إلكترونيًا. كان مشروع تخرجه بحاجة إلى تحقيق تأثير قفل الشاشة، لكنه لم يتمكن من فهم الكود المصدري لمربع الحوار الذي نشرته من قبل. وسألني عما إذا كان بإمكانه شرح ذلك لقد قلت إنني سأنشر الرمز المتعلق بشاشة القفل. وبما أنني كنت مشغولاً للغاية مؤخرًا، لم أتذكر ذلك إلا الآن، وآمل ألا يكون الوقت قد فات لكتابة هذا المقال.

الوصول إلى هذه النقطة:

في الوقت الحاضر، يتم استخدام طبقات القناع شبه الشفافة بملء الشاشة على نطاق واسع في مواقع الويب web2.0، ويتم تنفيذ معظم الأقنعة عن طريق حساب حجم الصفحة ثم تغطيتها بطبقة من نفس حجم الصفحة، مثل Tencent qzone وWordpress backend. . هذه الطريقة مفهومة، لكنها ستفشل في IE8 عندما تكون الصفحة طويلة جدًا (التفسير من المعلومات الأجنبية هو أنها مرتبطة ببطاقة الرسومات الخاصة بالجهاز). ، حتى أنهم يريدون إجبار IE8 على استخدام طريقة IE7 لتحليل أعماله. في الواقع لدينا طريقة أفضل، فلنستخدم CSS لحلها!

تذكر " الموقف: ثابت "؟ إنها سمة جديدة لـ CSS2. يمكنها جعل العنصر يظل ثابتًا على الصفحة ولا يتحرك عند سحب شريط التمرير. على سبيل المثال، يتم تنفيذ شريط التنقل الثابت في الجزء العلوي من Qzone بهذه الطريقة. وبالمثل، يمكننا أيضًا استخدام طبقة بارتفاع وعرض 100% لتغطية إطار عرض المتصفح، بحيث يمكن تحقيق إخفاء ملء الشاشة، وليست هناك حاجة لحساب حجم الصفحة، وليست هناك حاجة للتعديل ديناميكيًا الحجم عند تغيير حجم المتصفح.

ولكن هناك مشكلة. IE6 لا يدعم "الموضع: ثابت". يمكننا فقط تعديل قيمته TOP ديناميكيًا من خلال Js لمحاكاة الموضع الثابت عند سحب شريط التمرير، سيهتز القناع بالتأكيد لأنه في كل مرة يتغير فيها IE - تقديم مرة أخرى. لكن Microsoft زودتنا بميزة مثيرة جدًا للاهتمام. إذا قمت بتعيين صورة خلفية موضوعة بشكل ثابت لعلامة html أو body، فلن تهتز الطبقة عند سحب شريط التمرير، مما يحاكي تمامًا "position:fixed" ". في المشاريع الفعلية، وجدت أن هذه الميزة يمكنها أيضًا تشغيل وظائف خاصة أخرى، والتي سأشرحها لاحقًا.

من أجل توفير المتاعب، نستخدم التعبير الشرير لكتابة بعض البرامج النصية في CSS لـ IE6، وإعادة وضع طبقة القناع لدينا عند سحب شريط التمرير. تقول الأسطورة أن التعبير يتطلب أداءً مكثفًا للغاية، لكن تعبيرنا ليس به أي خسارة تقريبًا، ويمكن للطلاب المهتمين دراسة التعبير بعمق.

حسنًا، بعد التوافق مع الدمية ذات الرأس الكبير IE6، تم اعتماد قناع شاشة القفل الخاص بنا من قبل المتصفحات الرئيسية، ومع ذلك، فإن الطلاب الذين يستخدمون js لكتابة التأثيرات دائمًا ما يكونون محبطين للغاية ويريدون دائمًا إضافة شيء ما، لذلك سنضيف. برنامج نصي صغير لمقاطعة عمليات المستخدم عندما تكون الشاشة مقفلة، وتعطيل شريط التمرير، والعجلة، ومفتاح علامة التبويب، وتحديد الكل، والتحديث، والنقر بزر الماوس الأيمن لمحاكاة "شاشة قفل" حقيقية:

تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>صفحة القفل</ title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay {Visibility:hidden:fixed:0; 100% height:100%; الخلفية:#000; filter:alpha(opacity=70); :0; height:100%; } * html #pageOverlay { الموضع: مطلق؛ اليسار: Expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); } </style> <script> (function(){ // احصل على الكائن var $ = function (id){ return document.getElementById(id); }; // اجتياز var every = function(a, b) { for (var i = 0, len = a. length; i < len; i++) b(a[i], i }; obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); else { obj.addEventListener(type, fn, false }); obj.detachEvent) {try { obj.detachEvent('on' + type, obj[type + fn]); obj[type + fn] = null } Catch(_) {} } else { obj.removeEventListener( type , fn, false); }; }; // منع السلوك الافتراضي للمتصفح var stopDefault = function(e){ e.preventDefault() : e.returnValue = false }; الموضع var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db. التمريرTop) }; // قفل الشاشة var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; p.top // قيود تشغيل فأرة الصفحة this.mouse = function(evt){ var e = evt ||.stopDefault(e); 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); Tab، أعلى، أسفل this.key = function(evt){ var e = evt ||.window.event, key = e.keyCode; ||.(e.ctrlKey && == 65) ||.(key == 9) ||.(key == 40)) {try{ e.keyCode = 0; ){}; stopDefault(e); }; bind(document, 'keydown', lock.key }); (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. key); ){ lock.cloud() }); })(); </script> </head> <body> <button id="btn_lock" style="position:Absolute; left:50%; 40% ">تمكين قفل الشاشة</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ لى> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ لى> لى> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ لى> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> لي> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ لي> <لي>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]

النص الأصلي: http://www.planeart.cn/?p=792