Pour les développeurs d'applications Web, si le programme d'arrière-plan gère le programme pendant longtemps lorsque l'utilisateur parcourt l'interface, l'utilisateur attendra plus de temps sur la page Web, mais s'il n'y a plus de méthode d'invite amicale sur la page
(Ajouter pour augmenter l'effet de la poussière), alors l'expérience utilisateur ne sera pas particulièrement bonne. Les utilisateurs ne savent pas s'ils devraient cliquer sur d'autres programmes maintenant, et les utilisateurs ne savent pas s'ils doivent continuer à attendre la page Web, ou ils peuvent cliquer sur d'autres pages.
Il y a maintenant une interaction relativement bonne, qui est d'augmenter l'effet de la saupoudrage. Comme les extjs du cadre, les fonctions Mask () et Unmask () des extjs fournissent un effet grisonnant, et bien sûr, jQuery fournit également cette méthode grisonnante. Ici, l'auteur espère qu'il pourra
Utilisez le JS natif pour réaliser votre propre effet grisonnant. Alors j'ai fait un essai moi-même. A réalisé l'effet de la poussière. Ici, je me concentre uniquement sur la mise en œuvre. Je ne me suis pas beaucoup adapté à l'esthétique de la page, donc la page n'est pas très belle. Publiez le code d'implémentation ici.
Afficher les fragments de code dérivés de mes fragments de code sur le code
<! Doctype html public "- // w3c // dtd html 4.0 transitional // en"> <html> <adare> <title> nouveau document </ title> <meta name = "générateur" contenu = "editplus"> <meta name = "auteur" contenu = ""> <meta = "Keywords" contenu = ""> <amea = ">"> <style " type = "text / css"> .maskstyle {background-Color: # b8b8b8; Z-Index: 1; filtre: alpha (opacité = 50); Opacité: 0,8; Position: absolue; Texte-aligne: Centre; Couleur: bleu; Police: Bold 1em "安体", Arial, Times; hauteur: 25px; Police-poids: Bold; débordement: caché; } </ style> </ head> <script type = "text / javaScript"> function CreatMasklayer (EffectItem, showText) {divitem = document.createElement ("div"); divitem.classname = "maskStyle"; divitem.style.lineHeight = effetem.offsetheight + "px"; divitem.innerText = showText; divitem.style.width = effetem.offsetwidth; divitem.style.height = effetem.offsetheight; divitem.style.top = effetem.offSetTop; divitem.style.left = effetem.offsetLeft; retour divitem; } fonction setMask () {var EffectItem = document.getElementById ("test"); var exsirmaskitem = findMaskitem (EffectItem); if (existMaskitem) {return; } var showtext = "Loading ..."; EffectItem.ApendChild (CreatMasklayer (EffectItem, ShowText)); } function reroveMask () {var EffectItem = document.getElementById ("test"); var maskitem = findMaskitem (EffectItem); if (maskitem) {EffectItem.RemoveChild (maskitem); }} fonction findmaskitem (item) {var enfants = item.children; pour (var i = 0; i <enfants.length; i ++) {if ("maskStyle" == (enfants [i] .classname)) {return enfants [i]; }}} </ script> <body> <entrée type = "bouton" value = "annulé" onclick = "setmask ()" /> <entrée type = "bouton" value = "annulé" onclick = "rerovemask ()" /> <br> <div id = "test" style = "border: 1px solid; width: 300px; hight: 300px"> si vous pouvez cliquer sur "onclick =" alert ('ok!') "/> </div> </ body> </html>Expliquez les parties importantes du code.
.maskstyle est un style de couche gris
dans
Afficher les fragments de code dérivés de mes fragments de code sur le code
filtre: alpha (opacité = 50); Opacité: 0,8;
Il représente la transparence de la couche grise et l'attribut de filtre doit être compatible avec le navigateur IE8.
La propriété Z-Index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement plus élevé seront toujours devant des éléments avec un ordre d'empilement inférieur.
PS: L'effet de la poussière doit être saupoudré dans l'élément pour être placé dans le div