Aujourd'hui, je vais écrire un petit exemple, utilisant js et css pour écrire une boîte flottante qui peut être automatiquement masquée. CSS est définitivement utilisé pour contrôler les styles, et js est utilisé pour contrôler l'affichage et le masquage. L'affichage et le masquage sont généralement implémentés de deux manières : 1. Utilisez js pour contrôler ses attributs d'affichage. 2. Utilisez js pour contrôler sa taille ;
Ce dont nous allons parler aujourd'hui est de réaliser l'affichage et le masquage d'éléments en contrôlant leur taille. Le principe est le suivant : enregistrer l'événement de mouvement d'entrée et de sortie de la souris. Lorsque la souris sort de la plage de l'objet, définissez sa largeur sur. 1. Lorsque la souris revient sur l'objet, définissez sa largeur sur 1. Largeur restaurée. C'est très simple, jetons un coup d'oeil !
État masqué :
La ligne étroite sur la gauche est le cadre flottant après l'avoir masqué.
Statut d'affichage :
Lorsque la souris glisse sur la boîte flottante à gauche, la boîte flottante s'affichera à nouveau.
Style CSS :
Copiez le code comme suit :
<style>
* { font-size:12px; font-family:Verdana, };
html, corps { marge :0px ; remplissage :0px ; débordement :caché} ;
.b { marge:0px; remplissage:0px; débordement:auto }
.line0 { hauteur de ligne : 20 px ; couleur d'arrière-plan : jaune clair ; remplissage : 0px 15px ;
.line1 { hauteur de ligne : 18px ; couleur d'arrière-plan : bleu clair ; rembourrage : 0px 10px ;
.w { position : absolu ; lift : 10px ; haut : 10px ; largeur : 1px ; débordement : caché ; bordure : 2px groove #281 ; curseur : par défaut ;
.t { line-height:20px; height:20px; width:160px; background-color:#27C; font-weight:bold; centre; }
.winBody {hauteur:270px;largeur:160px; overflow-y:auto; border-top:1px padding:10px;
</style>
Code JS :
Copiez le code comme suit :
<script type="text/javascript">
fonction monshow(){
//document.getElementById('mydiv').style.display = "aucun";
document.getElementById('mydiv').style.width = "160px";
} //bloc
fonction ma peau(){
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
}
//Pour les tests, générez aléatoirement du contenu pour faciliter les effets des tests.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"<//div>");
nouvelle fonction (w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = fonction(){
w.style.width = d.documentElement.clientWidth + "px" ;
w.style.height = d.documentElement.clientHeight + "px" ;
})();
<span style="white-space:pre"> </span>}
</script>
Code HTML :
Copiez le code comme suit :
<corps>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Informations sur les étudiants</div>
<div>
Numéro d'étudiant : <label>0123456789 </label><br><br>
Nom : <label>Xiao Ming</label><br><br>
Collège : <label>Collège de logiciels</label><br><br>
Majeur : <label>Génie logiciel</label><br><br>
Classe : <label>Classe 1</label><br><br>
</div>
</div>
</corps>
Utilisez une boîte flottante pour afficher certaines informations. Lorsque vous avez besoin de la voir, pointez-la et elle apparaîtra, ce qui est très pratique lorsque vous éloignerez la souris lorsqu'elle n'est plus nécessaire, elle partira d'elle-même en silence. . Bien que ce soit très simple, il offre une bonne expérience utilisateur. Rendre les utilisateurs confortables est notre quête constante.