recherche

Maison >interface Web >js tutoriel >Utilisez JS natif pour obtenir un exemple de compétences code_javascript d'effet de masque de page

Utilisez JS natif pour obtenir un exemple de compétences code_javascript d'effet de masque de page

WBOY
WBOYoriginal
2016-05-16 16:43:421530parcourir

Pour les développeurs d'applications Web, si le temps de traitement du programme en arrière-plan est long lorsque l'utilisateur navigue dans l'interface, le temps d'attente de l'utilisateur sur la page Web sera plus long, mais s'il n'y a pas de méthode d'invite conviviale sur la page

(ajout d'un effet gris), alors l'expérience utilisateur ne sera pas particulièrement bonne. L'utilisateur ne sait pas s'il doit cliquer sur un autre programme maintenant, et l'utilisateur ne sait pas s'il doit continuer à attendre la page Web ou. cliquez sur une autre page.

Maintenant, il y a une relativement bonne interaction, qui consiste à ajouter un effet gris. Les fonctions mask() et unmask() du framework js Extjs fournissent un effet de grisage. Bien entendu, jquery fournit également cette méthode de grisage. L'auteur ici espère qu'il pourra aussi

Utilisez du js natif pour obtenir votre propre effet de grisonnement. Alors je l'ai essayé moi-même. Obtenu un effet gris. Ici, je me concentre uniquement sur la mise en œuvre, je n’ai pas beaucoup ajusté la beauté de la page, donc la page n’est pas très belle. Postez le code d'implémentation ici.

Afficher les extraits de code sur CODE dérivés de mes extraits de code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
.maskStyle { 
background-color:#B8B8B8; 
z-index:1; 
filter:alpha(opacity=50); 
opacity:0.8; 
position:absolute; 
text-align:center; 
color:blue; 
font:bold 1em "宋体",Arial,Times; 
height:25px; 
font-weight:bold; 
overflow:hidden; 

} 
</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; 
return divItem; 
} 
function setMask() { 
var effectItem = document.getElementById("test"); 
var existMaskItem = findMaskItem(effectItem); 
if(existMaskItem) { 
return; 
} 
var showText = "加载中..."; 
effectItem.appendChild(creatMaskLayer(effectItem,showText)); 
} 
function removeMask() { 
var effectItem = document.getElementById("test"); 
var 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"==(children[i].className)) { 
return children[i]; 
} 
} 
} 
</script> 
<BODY> 
<input type="button" value="蒙灰" onclick="setMask()"/> 
<input type="button" value="取消蒙灰" onclick="removeMask()"/> 
<br> 
<div id="test" style="border:1px solid;width:300px;height:300px"> 
蒙灰我吧 
<input type="button" value="测试是否还能点击" onclick="alert('OK!')"/> 
</div> 
</BODY> 
</HTML>


Expliquez les parties les plus importantes du code.

.maskStyle est le style du calque gris

Lequel
Afficher les extraits de code sur CODE Dérivés de mes extraits de code 

filter:alpha(opacity=50); 
opacity:0.8;

représente la transparence du calque gris, et l'attribut filtre est destiné à la compatibilité avec le navigateur IE8

L'attribut z-index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur.

PS : Pour un effet de grisage, vous devez mettre l'élément à griser dans un div

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple d'utilisation de la loupe d'image jquery.jqzoom.js avec la loupe icon_jqueryArticle suivant：Exemple d'utilisation de la loupe d'image jquery.jqzoom.js avec la loupe icon_jquery

Articles Liés

Voir plus