สำหรับนักพัฒนาเว็บแอปพลิเคชันหากโปรแกรมพื้นหลังจัดการโปรแกรมเป็นเวลานานเมื่อผู้ใช้เรียกดูอินเทอร์เฟซผู้ใช้จะรอเป็นเวลานานบนหน้าเว็บ แต่หากไม่มีวิธีการแจ้งเตือนที่เป็นมิตรในหน้าอีกต่อไป
(เพิ่มเพื่อเพิ่มผลกระทบของการปัดฝุ่น) จากนั้นประสบการณ์ของผู้ใช้จะไม่ดีโดยเฉพาะ ผู้ใช้ไม่ทราบว่าพวกเขาควรคลิกที่โปรแกรมอื่น ๆ ในขณะนี้และผู้ใช้ไม่ทราบว่าพวกเขาควรรอหน้าเว็บต่อไปหรือไม่หรือสามารถคลิกที่หน้าอื่น ๆ ได้
มีปฏิสัมพันธ์ที่ค่อนข้างดีในขณะนี้ซึ่งคือการเพิ่มผลกระทบของการปัดฝุ่น เช่นเดียวกับเฟรมเวิร์ก extjs, หน้ากาก () และฟังก์ชั่น unmask () ของ extjs ให้เอฟเฟกต์สีเทาและแน่นอน jQuery ยังให้วิธีการสีเทานี้ ที่นี่ผู้เขียนหวังว่าเขาจะทำได้
ใช้ JS ดั้งเดิมเพื่อให้ได้เอฟเฟกต์สีเทาของคุณเอง ดังนั้นฉันจึงลองตัวเอง บรรลุผลของการปัดฝุ่น ที่นี่ฉันมุ่งเน้นไปที่การใช้งานเท่านั้น ฉันไม่ได้ปรับเกี่ยวกับสุนทรียภาพของหน้ามากนักดังนั้นหน้าเว็บจึงไม่สวยมาก โพสต์รหัสการใช้งานที่นี่
ดูแฟรกเมนต์โค้ดที่ได้มาจากชิ้นส่วนรหัสของฉันบนรหัส
<! doctype html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <title> เอกสารใหม่ </title> <meta name = "generator" content = "editPlus"> <meta name = "content =" " type = "text/css"> .maskstyle {พื้นหลังสี:#b8b8b8; z-index: 1; ตัวกรอง: อัลฟ่า (ความทึบ = 50); ความทึบ: 0.8; ตำแหน่ง: สัมบูรณ์; TEXT-ALIGN: CENTER; สี: สีน้ำเงิน; แบบอักษร: ตัวหนา 1EM "安体", Arial, Times; ความสูง: 25px; Font-Weight: ตัวหนา; ล้น: ซ่อน; } </style> </head> <script type = "text/javascript"> function creatmasklayer (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 = effectItem.offSettop; divitem.style.left = effectItem.OffsetLeft; กลับ Divitem; } function setMask () {var effectItem = document.getElementById ("ทดสอบ"); var มีอยู่ maskitem = findmaskitem (effectItem); ถ้า (มีอยู่ maskitem) {return; } var showtext = "การโหลด ... "; EffectItem.AppendChild (creatmasklayer (EffectItem, ShowText)); } function removeMask () {var effectItem = document.getElementById ("ทดสอบ"); var maskitem = findmaskitem (EffectItem); if (maskItem) {effectItem.removeChild (maskItem); }} ฟังก์ชั่น findmaskitem (รายการ) {var children = item.children; สำหรับ (var i = 0; i <children.length; i ++) {ถ้า ("maskstyle" == (เด็ก [i] .classname)) {return children [i]; }}} </script> <body> <อินพุตประเภท = "ปุ่ม" value = "ยกเลิก" onClick = "setMask ()"/> <อินพุต type = "ปุ่ม" value = "ยกเลิก" onClick = "removeMask ()"/> <br> value = "ทดสอบว่าคุณสามารถคลิก" onclick = "การแจ้งเตือน ('ตกลง!')"/> </div> </body> </html>อธิบายส่วนสำคัญของรหัส
.Maskstyle เป็นสไตล์เลเยอร์สีเทา
ใน
ดูแฟรกเมนต์โค้ดที่ได้มาจากชิ้นส่วนรหัสของฉันบนรหัส
ตัวกรอง: อัลฟ่า (ความทึบ = 50); ความทึบ: 0.8;
มันแสดงถึงความโปร่งใสของเลเยอร์สีเทาและแอตทริบิวต์ตัวกรองจะเข้ากันได้กับเบราว์เซอร์ IE8
คุณสมบัติ z-index ตั้งค่าลำดับการซ้อนขององค์ประกอบ องค์ประกอบที่มีลำดับการซ้อนที่สูงขึ้นจะอยู่ตรงหน้าองค์ประกอบที่มีลำดับการซ้อนต่ำ
PS: ผลกระทบของการปัดฝุ่นจะต้องปัดฝุ่นลงในองค์ประกอบที่จะวางไว้ใน div