Für Entwickler von Webanwendungen, wenn das Hintergrundprogramm das Programm für eine lange Zeit, wenn der Benutzer die Benutzeroberfläche durchstürbt
(Fügen Sie hinzu, um die Wirkung des Staubs zu erhöhen), dann ist die Benutzererfahrung nicht besonders gut. Benutzer wissen nicht, ob sie jetzt auf andere Programme klicken sollten, und Benutzer wissen nicht, ob sie weiterhin auf die Webseite warten sollten, oder sie können auf andere Seiten klicken.
Es gibt jetzt eine relativ gute Wechselwirkung, die die Wirkung des Staubs erhöhen soll. Wie bei den Framework -ExtJs liefern die Funktionen von Maske () und Unmask () von ExtJs einen Grauffekt, und natürlich liefert JQuery diese Graumethode. Hier hofft der Autor, dass er es kann
Verwenden Sie native JS, um Ihren eigenen Grauffekt zu erzielen. Also machte ich es mir selbst. Erreichte die Wirkung des Staubs. Hier konzentriere ich mich nur auf die Implementierung. Ich habe mich nicht viel über die Ästhetik der Seite angepasst, daher ist die Seite nicht sehr schön. Veröffentlichen Sie hier den Implementierungscode.
Zeigen Sie Codefragmente an, die in meinen Codefragmenten auf Code abgeleitet wurden
<! DocType html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <titels> Neues Dokument </title> <meta name = "generator" content = "editPlus"> <meta name = "author" content = "> <meta name =" contents "content =" content = "content =" content = " type = "text/css"> .maskstyle {Hintergrundfarbe:#B8B8B8; Z-Index: 1; Filter: Alpha (Opazität = 50); Deckkraft: 0,8; Position: absolut; Text-Align: Mitte; Farbe: Blau; Schriftart: BOLD 1EM "安体", Arial, Zeiten; Höhe: 25px; Schriftgewicht: fett; Überlauf: versteckt; } </style> </head> <script type = "text/javaScript"> Funktion creatMasklayer (EffectItem, showText) {divitem = document.createelement ("div"); divitem.className = "maskStyle"; Divitem.Style.lineHeight = EffectItem.Offseteight+"PX"; DiviTEM.InNerText = showText; Divitem.Style.width = EffectItem.Offsetwidth; Divitem.Style.Height = EffectItem.Offseteight; Divitem.Style.top = EffectItem.Offsettop; Divitem.Style.Left = EffectItem.OffsetLeft; Rückspannung; } function set mask () {var effectItem = document.getElementById ("test"); var existMaskitem = findmaskitem (EffectItem); if (exist Maskitem) {return; } var showText = "Laden ..."; EffectItem.AppendChild (CreateMasklayer (EffectItem, ShowText)); } function removeMask () {var effectItem = document.getElementById ("test"); var maskiTem = findmaskitem (EffectItem); if (maskitem) {effectItem.removechild (maskitem); }} Funktion findmaskitem (item) {var children = item.children; für (var i = 0; i <children.Length; i ++) {if ("maskStyle" == (Kinder [i] .ClassName)) {return children [i]; }}} </script> <body> <Eingabe type = "button" value = "storniert" onclick = "setmask ()"/> <Eingabe type = "button" value = "storniert" onclick = "renoveVemask ()"/> <br> <div id = "test" style = "borle: 1px solide; width: 300px; Ob Sie auf "onclick =" alert ('OK!') klicken können "/> </div> </body> </html>Erklären Sie die wichtigen Teile des Codes.
.Maskstyle ist ein grauer Schichtstil
In
Zeigen Sie Codefragmente an, die in meinen Codefragmenten auf Code abgeleitet wurden
Filter: Alpha (Opazität = 50); Deckkraft: 0,8;
Es repräsentiert die Transparenz der grauen Schicht, und das Filterattribut soll mit dem IE8 -Browser kompatibel sein.
Die Z-Index-Eigenschaft legt die Stapelreihenfolge der Elemente fest. Elemente mit höherer Stapelordnung stehen immer vor Elementen mit geringerer Stapelreihenfolge.
PS: Die Wirkung des Staubs muss in ein Element abbestäuben, um in die Div zu platzieren