Hoje vou escrever um pequeno exemplo, usando js e css para escrever uma caixa flutuante que pode ser ocultada automaticamente. CSS é definitivamente usado para controlar estilos, e js é usado para controlar exibição e ocultação. Exibir e ocultar são geralmente implementados de duas maneiras: 1. Use js para controlar seus atributos de exibição; 2. Use js para controlar seu tamanho;
O que vamos falar hoje é realizar a exibição e ocultação de elementos controlando seu tamanho. O princípio é: registrar o evento de movimento do mouse para dentro e para fora do alcance do objeto, defina sua largura para. 1. Quando o mouse se mover novamente sobre o objeto, defina sua largura como 1. Largura restaurada. É muito simples, vamos dar uma olhada!
Estado oculto:
A linha estreita à esquerda é o quadro flutuante depois de ocultá-lo.
Status de exibição:
Quando o mouse desliza sobre a caixa flutuante à esquerda, a caixa flutuante será exibida novamente.
Estilo CSS:
Copie o código do código da seguinte forma:
<estilo>
* { font-size:12px; font-family:Verdana, 宋体;
html, corpo {margem:0px;estouro:oculto}
.b { margem:0px; preenchimento:0px;
.line0 {altura da linha:20px;cor de fundo:amarelo claro;
.line1 {altura da linha:18px;cor de fundo:azul claro;
.w {posição:absoluto;borda:2px;cursor:padrão;altura:300px;
.t { line-height:20px; height:20px; border-bottom:1px início de texto azul; centro;
.winBody { altura:270px; largura:160px; overflow-x:auto; overflow-y:auto;
</estilo>
Código JS:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
função meushow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //bloquear
função meuesconder(){
//document.getElementById('mydiv').style.display = "bloco";
document.getElementById('mydiv').style.width="1px";
}
//Para teste, gere algum conteúdo aleatoriamente para facilitar os efeitos do teste.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"</div>");
nova função(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--;
(janela.onresize=função(){
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 o código do código da seguinte forma:
<corpo>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Informações do Aluno</div>
<div>
Carteira de estudante: <label>0123456789 </label><br><br>
Nome: <label>Xiao Ming</label><br><br>
Faculdade: <label>Faculdade de Software</label><br><br>
Especialização: <label>Engenharia de Software</label><br><br>
Turma: <label>Classe 1</label><br><br>
</div>
</div>
</body>
Use uma caixa flutuante para exibir alguma informação. Quando precisar vê-la, aponte para ela e ela sairá, o que é muito conveniente quando você afastar o mouse quando não for mais necessário, ele sairá silenciosamente por conta própria; . Embora seja muito simples, oferece uma boa experiência ao usuário. Fazer coisas que deixem os usuários confortáveis é nossa busca constante.