Este artículo describe el método de JS+CSS para realizar la visualización de gradiente de la capa DIV que induce el mouse. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<title> Div Layer implementada por JS+CSS para detectar la visualización de gradiente de mouse </title>
<estilo>
#consejo{
Posición: Absoluto;
Izquierda: 90px;
Ancho: 0px;
Altura: 0px;
Color: #fff;
tamaño de fuente: 12px;
Color de fondo:#000;
borde: 1px sólido #def;
Filtro: alfa (opacidad = 0);
Opacidad: 0;
Índice Z: 999;
}
</style>
<script type = "text/javaScript">
<!-
// Definir la función para "obtener el nodo DOM especificado" porque su tasa de reutilización es alta
función $ (d) {return document.getElementById (d);}
// Control Div para mostrar gradualmente
var i = 0;
function Change_show () {
var obj = $ ("consejo");
i = i+5; // Muestra gradualmente la velocidad
obj.style.filter = "alfa (opacidad =" + i + ")"; // La transparencia disminuye gradualmente
obj.style.opacity = i/100; // Compatible con Firefox
if (i> = 100) {
ClearInterval (s);
i = 0;
}
}
// Control Div desaparece gradualmente
var j = 100;
función Change_hidden () {
var obj = $ ("consejo");
j = j-5; // Velocidad de desaparición gradualmente
obj.style.filter = "alfa (opacidad =" + j + ")"; // La transparencia aumenta gradualmente
obj.style.opacity = j/100; // Compatible con Firefox
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
j = 100;
}
}
// Comportamiento de control_show ()
var s;
función show (x) {
if (s) {ClearInterval (s);}
$ ("consejo"). style.display = "bloque";
s = setInterval (Change_Show, 1);
}
// Comportamiento de control_hidden ()
función oculta (x) {
$ ("consejo"). innerhtml = "";
h = setInterval (Change_hidden, 1);
}
//->
</script>
</ablo>
<Body>
<div id = "tip" style = "Color de fondo: azul; ancho: 48%; altura: 48%;" onMouseOver = "show (this);" onMouseOut = "Hidden (this);">
</div>
<Br />
<br> Las diapositivas del mouse aquí, la pantalla de gradiente de la capa DIV se muestra <br> <hr> recopilada en Internet, solo por interés y comunicación de aprendizaje, y no con fines comerciales. </font> </p>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.