มาสก์โปร่งใสแบบเต็มหน้าจออย่างง่าย (ไลท์บ็อกซ์)

ผู้เขียน：Eve Cole เวลาอัปเดต：2010-06-09 17:08:28

เมื่อไม่นานมานี้ ชาวเน็ตที่กำลังจะสำเร็จการศึกษาส่งอีเมลถึงฉัน โปรเจ็กต์สำเร็จการศึกษาของเขาจำเป็นต้องมีเอฟเฟกต์หน้าจอล็อก แต่เขาไม่เข้าใจซอร์สโค้ดของกล่องโต้ตอบที่ฉันโพสต์ก่อนหน้านี้ เขาถามว่าเขาจะอธิบายได้ไหม รหัสที่เกี่ยวข้องกับหน้าจอล็อค ฉันบอกว่าฉันจะโพสต์มันภายในสองวัน เนื่องจากช่วงนี้ฉันยุ่งมาก ฉันเพิ่งจำได้ตอนนี้ และหวังว่ามันจะไม่สายเกินไปที่จะเขียนบทความนี้

การเดินทางไปยังจุด:

ในปัจจุบัน เลเยอร์มาสก์กึ่งโปร่งใสแบบเต็มหน้าจอถูกนำมาใช้กันอย่างแพร่หลายในเว็บไซต์ web2.0 มาสก์ส่วนใหญ่ใช้งานโดยการคำนวณขนาดหน้าแล้วจึงคลุมด้วยเลเยอร์ที่มีขนาดเดียวกับหน้า เช่น Tencent qzone และ wordpress backend . วิธีนี้เป็นที่เข้าใจได้ แต่จะล้มเหลวภายใต้ IE8 เมื่อหน้าเว็บยาวมาก (คำอธิบายจากข้อมูลต่างประเทศคือเกี่ยวข้องกับกราฟิกการ์ดของเครื่อง) นักเรียนบางคนที่มีโครงเรื่องสมบูรณ์แบบต่างเกาหัวหลังจากประสบปัญหานี้ พวกเขาแม้ฉันต้องการให้ IE8 ถูกบังคับให้ใช้วิธีการของ IE7 เพื่อแยกวิเคราะห์ผลงานของเขา จริงๆ แล้ว เรามีวิธีที่ดีกว่า มาใช้ CSS เพื่อแก้ปัญหากันดีกว่า!

จำ " position:fixed " ได้ไหม? เป็นแอตทริบิวต์ใหม่ของ CSS2 สามารถทำให้องค์ประกอบยังคงอยู่บนหน้าและไม่ย้ายเมื่อลากแถบเลื่อน ตัวอย่างเช่น มีการใช้แถบนำทางคงที่ที่ด้านบนของ Qzone ในลักษณะนี้ ในทำนองเดียวกัน เรายังสามารถใช้เลเยอร์ที่มีความสูงและความกว้าง 100% เพื่อครอบคลุมวิวพอร์ตของเบราว์เซอร์ เพื่อให้สามารถมาสก์แบบเต็มหน้าจอได้ ไม่จำเป็นต้องคำนวณขนาดของหน้า และไม่จำเป็นต้องแก้ไขแบบไดนามิก ขนาดเมื่อปรับขนาดเบราว์เซอร์

แต่มีอาการปวดหัว IE6 ไม่รองรับ "ตำแหน่ง: คงที่" เราสามารถแก้ไขค่า TOP แบบไดนามิกเท่านั้นเพื่อจำลองตำแหน่งคงที่ เมื่อลากแถบเลื่อน หน้ากากจะสั่นแน่นอนเพราะทุกครั้งที่มีการเปลี่ยนแปลง IE -เรนเดอร์อีกครั้ง แต่ Microsoft ได้มอบคุณสมบัติที่น่าสนใจให้กับเรา หากคุณตั้งค่าภาพพื้นหลังที่มีตำแหน่งคงที่สำหรับแท็ก html หรือเนื้อหา เลเยอร์จะไม่สั่นเมื่อลากแถบเลื่อน ซึ่งเกือบจะจำลอง "ตำแหน่ง:คงที่" ได้อย่างสมบูรณ์แบบ ในโครงการจริง ฉันพบว่าฟีเจอร์นี้สามารถเรียกใช้ฟังก์ชันพิเศษอื่นๆ ได้ ซึ่งฉันจะอธิบายในภายหลัง

เพื่อช่วยแก้ไขปัญหา เราใช้สำนวนชั่วร้ายในการเขียนสคริปต์บางตัวใน CSS สำหรับ IE6 และเปลี่ยนตำแหน่งเลเยอร์มาสก์ของเราเมื่อลากแถบเลื่อน ตำนานเล่าว่าการแสดงออกนั้นเน้นการแสดงอย่างมาก แต่การแสดงออกของเราแทบจะไม่มีการสูญเสียเลย นักเรียนที่สนใจสามารถศึกษาการแสดงออกในเชิงลึกได้

โอเค หลังจากเข้ากันได้กับตุ๊กตาหัวโต IE6 แล้ว มาสก์หน้าจอล็อคของเราก็ถูกนำไปใช้โดยเบราว์เซอร์กระแสหลัก อย่างไรก็ตาม นักเรียนที่ใช้ js ในการเขียนเอฟเฟกต์มักจะหงุดหงิดมากและอยากจะโยนอะไรบางอย่างอยู่เสมอ ดังนั้นเราจะเพิ่ม สคริปต์เล็กๆ น้อยๆ ที่จะขัดขวางการทำงานของผู้ใช้เมื่อหน้าจอถูกล็อค ปิดการใช้งานแถบเลื่อน ล้อ ปุ่มแท็บ เลือกทั้งหมด รีเฟรช และคลิกขวาเพื่อจำลอง 'หน้าจอล็อค' จริง:

เรียกใช้กล่องรหัส
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//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 = "ผู้แต่ง" content = "www.planeart.cn" /> <style> #pageOverlay { การมองเห็น: ซ่อน; ตำแหน่งด้านบน: 0; ซ้าย: 0; 100%; ความสูง:100%; พื้นหลัง:#000; ตัวกรอง:alpha(opacity=70); } /*IE6 คงที่*/ * html { พื้นหลัง:url(*) คงที่ } * html body { margin :0; height:100%; } * html #pageOverlay { ตำแหน่ง: สัมบูรณ์; ซ้าย: นิพจน์ (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); ); } </style> <script> (function(){ // รับวัตถุ var $ = function (id){ return document.getElementById(id); }; // Traverse var แต่ละ = function(a, b) { สำหรับ (var i = 0, len = a.length; i < len; i++) b(a[i], i); }; // การเชื่อมโยงเหตุการณ์ var bind = function (obj, type, fn) { if ( 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); }; // ลบเหตุการณ์ var unbind = function (obj, type, fn) { if ( obj.detachEvent) { ลอง { 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. scrollTop) }; }; // ล็อคหน้าจอ var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // ข้อจำกัดการทำงานของเมาส์หน้า this.mouse = function(evt){ var e = evt ||. 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse); }); // บล็อกเฉพาะคีย์: F5, Ctrl + R, Ctrl + A, Tab, ขึ้น, ลง this.key = function(evt){ var e = evt ||. window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) ||. (e.ctrlKey && คีย์ == 65) ||. (คีย์ == 38) ||. (คีย์ == 40)) { ลอง { e.keyCode = 0; ){}; stopDefault(e); }; ผูก (เอกสาร, 'keydown', lock.key); }, ปิด: function(){ $('pageOverlay').style.visibility = 'hidden'; (['DOMMousScroll', 'mousewheel', 'scroll', 'contextmenu'], ฟังก์ชั่น(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. คีย์); } }; ผูก (หน้าต่าง 'โหลด' ฟังก์ชั่น () { $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }; })(); </script> </head> <body> <button id="btn_lock" style="position: ซ้าย: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> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]

ข้อความต้นฉบับ: http://www.planeart.cn/?p=792