É o fim de semana, é hora de resumir amanhã. Sinto que aprendi algumas coisas, mas sinto que não aprendi muito. Vamos analisá -lo amanhã. Vamos dar uma olhada nos problemas que quero analisar hoje.
Todo mundo está familiarizado com esta foto:
―
Hoje vamos analisá -lo e criar. Vamos primeiro apresentar as características desta caixa pop-up:
* Sempre anexado à borda da página
* Não mude de posição à medida que a página subir e cai
* Quando o mouse passar, as informações detalhadas serão exibidas e, quando sair, ele retornará ao seu estado original.
Dessa maneira, podemos pensar aproximadamente em várias funções possíveis: posicionamento absoluto do post; monitoramento e métodos do mouse passando; Isso definitivamente será usado, mas quais são os outros usos além deles e como eles são implementados?
1. Implementar todo o status de interface exibido
Escreva o código HTML primeiro
A cópia do código é a seguinte:
<span style = "font-size: 12px;"> <div id = "shareleft">
<div>
<p> <a href = "#"> dica </a> </p>
</div>
<p id = "mainmsg" onmouseover = "showTip ()">
Compartilhar para
</p>
</div> </span>
Então codificação do estilo CSS
A cópia do código é a seguinte:
<span style = "font-size: 12px;">*{margem: 0; preenchimento: 0;}
#shareleft {posição: fixo; cor de fundo: amarelo; topo: 50px; largura: 300px; altura: 600px; direita: 0px;}
#mainmsg {cor: #fff; posição: absoluto; cursor: ponteiro; text-align: Center; cor de fundo: vermelho; topo: 60px; largura: 100px; altura: 400px; preenchimento: 20px 0 0 10px; margem-left: -100px; borda-radius: 50px 0 50px; }
.List {float: direita; cor de fundo: #fff; largura: 280px; altura: 580px; margem: 10px 10px 10px 10px;} </span>
Vamos analisar os pontos -chave aqui: a. Post: A posição fixa é muito boa; b. Direita: 0px, a aplicação específica disso será explicada em detalhes posteriormente, mas também é muito importante aqui; 3. #Mainmsg Margin -left: -100px, este lugar também é muito importante, então vamos dar uma olhada no efeito
Haha, esta é a maior caixa pop-up do ano. Vamos continuar falando sobre o efeito pop-up de JS
2. Esconda a parte detalhada, provocando que a peça está vazando para fora
Isso é relativamente simples. Para modificá-lo, basta alterar o valor certo de shareleft, certo = -300px, que é a largura da div
3. JS para alcançar o efeito pop-up
Esta não é a primeira vez que usamos o efeito desse timer. Aplicamos -o ao implementar o efeito da máquina de escrever por JS., Aqui apenas alteramos o objeto de tempo.
A cópia do código é a seguinte:
<span style = "font-size: 12px;"> <script type = "text/javascript">
Var Timer = NULL;
var count = 0;
var dica = função (posição, alvo, velocidade) {
ClearInterval (timer);
Timer = setInterval (function () {
if (count> position.OffSetWidth) {
ClearInterval (timer);
}outro{
position.style.right+= window.count+"px";
window.count ++;
};
}, velocidade);
};
função showTip () {
var position = document.getElementById ("shareleft");
dica (posição, document.body.clientwidth, 1000);
};
</script> </span>
Os pontos mais importantes para prestar atenção neste código são: OffsetWidth, .style.right, etc. Não vou falar sobre isso por enquanto. Vou apresentá -lo especificamente. Vamos usá -lo assim primeiro, apenas saiba o significado.
Depois de entender isso minuciosamente, o efeito será alcançado agora, para que você possa experimentá -lo também.