css js implémente la mise en évidence de zones partielles et les compétences de masque layer_javascript modifiables-js tutoriel-php.cn

Maison

interface Web

js tutoriel

css js implémente la mise en évidence de zones partielles et les compétences de masque layer_javascript modifiables

May 16, 2016 pm 04:57 PM

calque de masque Souligner

Je pense que tout le monde a réalisé des fonctions communes telles que les calques de masque, implémentées avec css ou jquery, et les méthodes d'implémentation sont diverses. Ici http:// Je présente la méthode que j'ai implémentée dans le projet, masque plein écran, certaines zones sont exploitables, très pratique.

L'effet est le suivant :
css js implémente la mise en évidence de zones partielles et les compétences de masque layer_javascript modifiables
Partie d'implémentation js :

Copier le code code Comme suit :

 
<script type="text/javascript"> 
var myAlert = document.getElementById("alert"); ("content").getElementsByTagName("a")[0]; 
reg.onclick = function() { 
myAlert.style.background = "#e2ecf5"; "501" ; 
myAlert.style.position = "absolu"; 

var signSpan = document.getElementById("signSpanId"); >myAlert.style.left = signSpan.offsetLeft; 

mybg = document.createElement("div"); 
mybg.setAttribute("id", "mybg"); .background = "#000"; 
monbg.style.width = "100%"; 
monbg.style.hauteur = "100%" 
monbg.style.position = "absolu"; 🎜>monbg.style.top = "0"; 
monbg.style.left = "0" 
monbg.style.zIndex = "500"; 
monbg.style.opacity = "0,3"; ; 
mybg.style.filter = "Alpha(opacity=30)"; 
document.body.appendChild(mybg); 

//document.body.style.overflow = "hidden" ; 
} 
</script> 

 
Code de la page : 

Copier le code

Le code est le suivant : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content -Type" content="text/html; charset=gb2312" />

</head>

<body> 1" align="center " width="700px"> 
<tr> 
<td width="300px" height="200px" style="font-size:28px; bold"> 
<div id="content"> 
<a href="#"> 
Activer le calque de masque
</a> 
</ div> 
 </td> 
<td style="vertical-align:top"> 
<div id="signSpanId" style="position:absolute;"> /div> 
<div id="alert" align="top"> 
<h4> 
<span> ; 
 </h4> 
<p> 
<label> 
Nom d'utilisateur
</label> 🎜>&lt ;/p> 
<p> 
<label> 
Mot de passe
</label> </ p> 
<p> 
<input type="submit" value="S'inscrire" /> 
</p> 
</div> 

</td> 
<td width="100px"> troisième colonne </div> 
</td> 
</html> 

Déclaration de ce site Web

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