1. Subforma
Ao projetar um site, precisamos projetar algumas subformadas modais, como
Esta etapa é fácil de implementar, apenas div+css está ok, consulte o código:
A cópia do código é a seguinte:
<div> </div>
<div>
<div>
<Center> Clicando na área do bloco pode alterar minha posição </fente>
</div>
</div>
A cópia do código é a seguinte:
.Modal-background
{
Background-Color: #999999;
Inferior: 0;
Esquerda: 0;
Opacidade: 0,3;
Posição: fixado;
Direita: 0;
topo: 0;
Z-Index: 1100;
}
.Modal-Window
{
Background-Color: #fffff;
fronteira: 1px Solid #6B94AD;
Box-Shadow: 5px 5px 5px #6B94AD;
Fonte-família: 'Microsoft Yahei';
tamanho de fonte: 12px;
Altura: 120px;
Esquerda: 50%;
margem -esquerda: -160px;
Margin -top: -160px;
opacidade: 1;
Posição: fixado;
TOP: 50%;
Largura: 320px;
Z-Index: 1110;
}
.Modal-Window .head
{
Altura: 25px;
Cor: #ffff;
peso-fonte: 600;
Antecedentes: -moz-linear-gradiente (topo, #4a8cc5, #2963A5);
Antecedentes: -Webkit Gradiente (linear, superior esquerdo, parte inferior esquerda, parada de cor (0, #4A8CC5), parada de cor (1, #2963A5));
Filtro: Progid: DIMAGETRANSFORM.Microsoft.Gradiente (startColorstr = '#4A8CC5', endColorstr = '#2963A5', gradienteType = '0'); : ::::::::::::::::::::::::Here ::::::::::::::::::here
}
. Modal-Window. Centro
{
Top-top: 2px;
}
Adicionar o HTML e o CSS acima podem facilmente atingir o efeito da forma modal acima. onde esquerda: 50%; topo: 50%;
Obviamente, o tamanho do formulário modal é gravado na classe de estilo.
A cópia do código é a seguinte:
<div> </div>
<div>
<div>
<Center> Clicando na área do bloco pode alterar minha posição </fente>
</div>
</div>
A segunda linha de código é anexada à classe .List-Window Style para substituir o tamanho e a posição na classe .Modal-Window, mas também garante que o formulário modal seja centrado e exibido.
A cópia do código é a seguinte:
.List-Window
{
Largura: 600px;
Altura: 400px;
margem-esquerda: -300px;
Margin-top: -200px;
}
Como mostrado
Pode -se observar que a implementação desta etapa é muito simples.
2. Quando o mouse clicar na cabeça da subformada, como arrastar e mover o subformato? Depois de introduzir o JQ, precisamos apenas de alguns scripts para resolver essa pequena função. Se você não acredita, vamos ver
A cópia do código é a seguinte:
var esquerdo, top, $ this;
$ (documento) .Delegate ('.
esquerda = e.clientX, top = e.clienty, $ this = $ (this) .css ('cursor', 'move');
this.setcapture?
this.setCapture (),
this.onMousEMove = function (EV) {mouseMove (EV || Evento);
this.onMouseUp = mouseup
): $ (documento) .bind ("mousemove", mousemove) .bind ("mouseup", mouseup);
});
função mousemove (e) {
var no destino = $ this.parents ('. Modal-Window');
var L = MATH.MAX ((E.ClientX -Esquerda + Número (Target.css ('margem -left'). Substitua (/px $/, '')) || 0), -target.Position (). esquerda);
var t = Math.max ((e.clienty -top + número (Target.css ('margem -top'). Substitua (/px $/, '')) || 0), -target.Position (). principal);
l = math.min (l, $ (janela) .Width () - Target.width () - Target.Position (). Esquerda);
t = math.min (t, $ (janela) .Height () - Target.Height () - Target.Position (). Top);
esquerda = e.clientX;
top = e.clienty;
Target.css ({'margem-left': l, 'margin-top': t});
}
função mouseup (e) {
var el = $ this.css ('cursor', 'padrão'). get (0);
El.releaseCapture?
(
el.releasecapture (),
el.onmousemove = el.onmouseup = nulo
): $ (documento) .unbind ("mousemove", mousemove) .unbind ("mouseup", mouseup);
}
Este código é muito curto e pode ser executado sem problemas em vários navegadores.
De fato, seu princípio de implementação é muito simples e aproximadamente dividido em três etapas:
① Quando o mouse está sob mousedown na cabeceira da forma modal, liga imediatamente os eventos de mousemove e mouseup ao documento.
② Quando o mouse não aparece (sem mouseup), se o mouse se mover na forma, ativar a função da mousemove e mover a posição de toda a forma no tempo calculando a distância que o mouse se move.
③ Quando o mouse é saltado (MouseUp), ligue para o evento MouseUp para desbaste o evento MouseMove e o MouseUp Event vinculado ao documento.
O princípio de todo o processo é: quando o mouse mousedown é preso, o evento de movimento do mouse é transferido para o documento e todo o formulário é processado através do evento de movimento do mouse no documento.
Além disso, há um pequeno truque no mousemove, que é a esquerda global. quão longe o mouse se moveu.
Após a análise deste código, verificou -se que o mouse move o formulário ou qualquer elemento no documento é bastante fácil.
Por exemplo, se você deseja alterar o tamanho do formulário arrastando e soltando, precisamos apenas ajustar o tamanho do formulário na função de manuseio de eventos do MouseMove e tudo bem. melhorou novamente? Que tal pequenos passos?
Algumas pessoas podem perguntar o que o setCapture e o RELEASECAPTURO estão respectivamente? De fato, isso é para compatibilidade com o IE. O setCapture permite que o elemento atual capture todos os eventos do mouse.