Écrivez une boîte flottante qui peut être automatiquement masquée avec les compétences js et css_javascript

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 propriétés d'affichage. 2. Utilisez js pour contrôler sa taille ;

Ce dont je vais parler aujourd'hui, c'est de rendre les éléments visibles et masqués en contrôlant leur taille. Le principe est le suivant : enregistrer les événements d'entrée et de sortie de la souris lorsque la souris en sort. dans la plage d'objets, définissez sa largeur sur 1. Lorsque la souris bouge à nouveau, déplacez l'objet vers l'intérieur et restaurez sa largeur. C'est très simple, jetons un coup d'oeil !

État caché :



La ligne étroite à gauche est la boîte flottante après s'être cachée.

Statut d'affichage :


Lorsque la souris glisse sur la boîte flottante à gauche, la boîte flottante s'affichera à nouveau.

Style CSS :

Copier le code Le code est le suivant :

* { font-size:12px; font-family:Verdana,宋体; }
corps { margin:0px; overflow:hidden; margin:0px ; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:0px 15px; -color : bleu clair ; padding :0px 10px ; }
.w { position :absolute ; top : 10px ; hauteur : 300px; par défaut ; - moz-user-select : aucun ; }
.t { hauteur de la ligne : 20 px largeur : caché ; couleur de l'arrière-plan : #27C ; :bold; border-bottom:1px outset blue; text-align:center }
.winBody { height:270px; overflow-x:auto; bleu ; remplissage : 10px ; couleur d'arrière-plan : blanc ; }



Code JS :

Copier le code Le code est le suivant :

Code HTML :

Copier le code

Le code est le suivant :

Informations sur les étudiants

ID étudiant : 0123456789


Nom : Xiao Ming
Collège : Software College


Majeure : Classe : Classe 1

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 éloignez la souris lorsqu'elle n'est pas nécessaire, elle disparaîtra silencieusement ; le sien. Bien que ce soit très simple, il offre une bonne expérience utilisateur. Rendre les utilisateurs confortables est notre quête constante.