Para los desarrolladores de aplicaciones web, si el programa de fondo maneja el programa durante mucho tiempo cuando el usuario navega por la interfaz, el usuario esperará más tiempo en la página web, pero si no hay un método de aviso más amigable en la página
(Agregue para aumentar el efecto del polvo), entonces la experiencia del usuario no será particularmente buena. Los usuarios no saben si ahora deben hacer clic en otros programas, y los usuarios no saben si deberían continuar esperando la página web, o pueden hacer clic en otras páginas.
Hay una interacción relativamente buena ahora, que es aumentar el efecto del polvo. Al igual que las funciones de Mask () y Unmask () de ExtJs proporcionan un efecto aturdido y, por supuesto, JQuery también proporciona este método de enmovedor. Aquí el autor espera que pueda
Use JS nativo para lograr su propio efecto de cisno. Así que lo probé yo mismo. Logró el efecto del polvo. Aquí solo me estoy centrando en la implementación. No he ajustado mucho sobre la estética de la página, por lo que la página no es muy hermosa. Publique el código de implementación aquí.
Ver fragmentos de código derivados de mis fragmentos de código en el código
<! Doctype html public "-// w3c // dtd html 4.0 type = "text/css"> .MaskStyle {Background-Color:#B8B8B8; índice z: 1; Filtro: alfa (opacidad = 50); Opacidad: 0.8; Posición: Absoluto; Text-Align: Center; Color: azul; Font: Bold 1em "安体", Arial, Times; Altura: 25px; Font-Weight: Bold; desbordamiento: oculto; } </style> </head> <script type = "text/javaScript"> function createMasklayer (Effectem, showText) {divitem = document.createElement ("div"); divitem.classname = "Maskstyle"; divitem.style.lineHeight = EffectItem.OffsetHEight+"Px"; divitem.inntext = showText; divitem.style.width = EffectItem.OffSetWidth; divitem.style.Height = EffectItem.Offsetheight; divitem.style.top = Effectem.offsettop; divitem.style.left = EffectItem.OffSetLeft; Divitema de regreso; } function setMask () {var efectivo = document.getElementById ("test"); var existmaskitem = findMaskItem (EffectItem); if (existeMaskItem) {return; } var showText = "Carga ..."; EffectItem.appendChild (creatmasklayer (efectivo, showText)); } function remoVEMask () {var efectivo = document.getElementById ("test"); var máscara MaskItem = findMaskItem (EffectItem); if (MaskItem) {EffectItem.RemoVeChild (MaskItem); }} function findMaskItem (item) {var children = item.children; for (var i = 0; i <children.length; i ++) {if ("MaskStyle" == (niños [i] .classname)) {return Children [i]; }}} </script> <body> <input type = "button" value = "canceled" onClick = "setMask ()"/> <input type = "button" value = "cancelado" onClick = "removeMask ()"/> <br> <Div ID = "Test" style = "Bonder: 1px Solid; widt: 300px; altura: 300px"> estaré cubierto con el dapo = "Botón" Botón "Botón" Botón "Botón" Button "Button" Button = "Button" Botón = "Button" Botón ". Si puede hacer clic en "onClick =" alert ('ok!') "/> </div> </body> </html>Explique las partes importantes del código.
.maskstyle es un estilo de capa gris
en
Ver fragmentos de código derivados de mis fragmentos de código en el código
Filtro: alfa (opacidad = 50); Opacidad: 0.8;
Representa la transparencia de la capa gris, y el atributo del filtro debe ser compatible con el navegador IE8.
La propiedad del índice Z establece el orden de apilamiento de elementos. Los elementos con mayor orden de apilamiento siempre estarán frente a elementos con orden de apilamiento más bajo.
PD: El efecto del polvo debe estar desempolvado en el elemento para colocarse en el div.