Este artigo descreve o método do JS+CSS para realizar a exibição de gradiente da camada div, induzindo o mouse. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Div Camada implementada por JS+CSS para detectar a exibição de gradiente do mouse </title>
<estilo>
#dica{
Posição: Absoluto;
Esquerda: 90px;
Largura: 0px;
Altura: 0px;
Cor: #FFF;
tamanho de fonte: 12px;
Background-Color:#000;
borda: 1px sólido #def;
filtro: alfa (opacidade = 0);
opacidade: 0;
Z-Index: 999;
}
</style>
<script type = "text/javascript">
<!-
// Defina a função de "obter o nó DOM especificado" porque sua taxa de reutilização é alta
função $ (d) {return document.getElementById (d);}
// Controle div para exibir gradualmente
var i = 0;
função alteração_show () {
var obj = $ ("dica");
i = i+5; // exibe gradualmente a velocidade
obj.style.filter = "alpha (opacity =" + i + ")"; // a transparência diminui gradualmente
obj.style.Opacity = i/100; // Compatível com o Firefox
if (i> = 100) {
ClearInterval (s);
i = 0;
}
}
// control div gradualmente desaparece
var j = 100;
função alteração_hidden () {
var obj = $ ("dica");
J = J-5; // desaparece gradualmente a velocidade
obj.style.filter = "alpha (opacity =" + j + ")"; // a transparência aumenta gradualmente
obj.style.Opacity = J/100; // Compatível com o Firefox
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
j = 100;
}
}
// Control Change_Show () Comportamento
var s;
Função mostra (x) {
if (s) {clearInterval (s);}
$ ("tip"). style.display = "bloco";
s = setInterval (alteração_show, 1);
}
// Control Change_Hidden () Comportamento
função oculta (x) {
$ ("tip"). innerhtml = "";
h = setInterval (alteração_hidden, 1);
}
//->
</script>
</head>
<Body>
<div id = "tip" style = "cor de fundo: azul; largura: 48%; altura: 48%;" onMouseOverover = "Show (this);" onMouseout = "Hidden (this);">
</div>
<br />
<br> O mouse desliza aqui, a tela do gradiente da camada DIV é exibida <br> <HR> coletada na Internet, apenas para comunicação de interesse e aprendizado, e não para fins comerciais. </font> </p>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.