Hoy escribiré un pequeño ejemplo, usando js y css para escribir un cuadro flotante que se puede ocultar automáticamente. CSS definitivamente se usa para controlar estilos y js se usa para controlar la visualización y ocultación. Mostrar y ocultar generalmente se implementan de dos maneras: 1. Use js para controlar sus atributos de visualización 2. Use js para controlar su tamaño;
De lo que vamos a hablar hoy es de realizar la visualización y ocultación de elementos controlando su tamaño. El principio es: registrar el evento de movimiento del mouse hacia adentro y hacia afuera Cuando el mouse se mueve fuera del rango del objeto, establezca su ancho. 1. Cuando el mouse vuelva a entrar en el objeto, establezca su ancho en 1. Ancho restaurado. Es muy sencillo, ¡echemos un vistazo!
Estado oculto:
La línea estrecha de la izquierda es el marco flotante después de ocultarlo.
Estado de visualización:
Cuando el mouse se deslice sobre el cuadro flotante de la izquierda, el cuadro flotante se mostrará nuevamente.
Estilo CSS:
Copie el código de código de la siguiente manera:
<estilo>
* {tamaño de fuente:12px; familia de fuentes:Verdana, 宋体}
html, cuerpo { margen:0px; relleno:0px; desbordamiento:oculto }
.b { margen:0px; relleno:0px; desbordamiento:auto }
.line0 {altura de línea: 20 px; color de fondo: amarillo claro; relleno: 0 px 15 px;
.line1 {altura de línea: 18 px; color de fondo: azul claro; relleno: 0 px 10 px;
.w { posición: absoluta; elevación: 10 px; ancho: 1 px; desbordamiento: oculto; borde 2 px; cursor: predeterminado;
.t { altura de línea: 20px; altura: 20px; ancho: 160px; desbordamiento: oculto; color de fondo: # 27C; peso de fuente: negrita; centro; }
.winBody { altura: 270 px; ancho: 160 px; desbordamiento-x: auto; desbordamiento-y: auto; borde superior: 1 px relleno: 10 px;
</estilo>
código JS:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
función mishow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //bloquear
función miocultar(){
//document.getElementById('mydiv').style.display = "bloque";
document.getElementById('mydiv').style.width="1px";
}
// Para las pruebas, genere algún contenido aleatoriamente para facilitar los efectos de las pruebas.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"<//div>");
nueva función(w,b,c,d,o){
d=documento;b=d.body;o=b.childNodes;c="nombredeclase";
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--;
(ventana.onresize = función(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
código HTML:
Copie el código de código de la siguiente manera:
<cuerpo>
<div id="midiv" onmousemove="mishow()" onmouseout="miocultar()">
<div>Información del estudiante</div>
<div>
ID de estudiante: <label>0123456789 </label><br><br>
Nombre: <label>Xiao Ming</label><br><br>
Facultad: <label>Facultad de Software</label><br><br>
Especialidad: <label>Ingeniería de software</label><br><br>
Clase: <label>Clase 1</label><br><br>
</div>
</div>
</cuerpo>
Utilice un cuadro flotante para mostrar información. Cuando necesite verla, apúntela y aparecerá, lo cual es muy conveniente cuando aleje el mouse cuando ya no sea necesario, se irá silenciosamente por sí solo; . Aunque es muy simple, nuestra búsqueda constante es hacer cosas que hagan que los usuarios se sientan cómodos.