Este exemplo compartilhará com você o código de implementação específico da janela de arrasto pop-up javascript para sua referência. O conteúdo específico é o seguinte
Descrição do requisito:
1. Clique no botão da página para aparecer a janela;
2. Tenha uma máscara de fundo translúcida;
3. A janela pop-up tem cantos arredondados, a janela é translúcida, mas o conteúdo é opaco; com sombra;
4. A janela pode ser arrastada;
5. Após a parada do arrasto, a posição da janela permanece inalterada ao rolar a página;
6. Você pode usar jQuery;
7. Há um botão de fechar;
Descrição funcional adicional:
Clique no botão e haverá uma camada flutuante que pode ser arrastada para fora.
Há uma máscara de fundo que suporta arrastar e soltar a barra de título. Arrastar para fora da área da barra de título não tem efeito. A função de arrasto é limitada e sua função de arrasto é limitada à área visível.
Idéias de arrasto:
Obtenha a posição do mouse. Quando o mouse se mover, obtenha a posição do mouse, obtenha o eixo x e o eixo y, atribua-o ao eixo y do eixo x da janela e faça a janela absolutamente posicionada. Cancelar este evento quando o mouse for lançado.
O princípio da implementação de arrastar e soltar:
Quando o mouse está se movendo, a posição de coordenadas da camada flutuante é constantemente atualizada quando o mouse está se movendo.
1. Quando o mouse pressionar o elemento flutuante, marque o elemento flutuante, pois pode ser arrastado.
2. Quando o mouse está se movendo, primeiro verificamos se as flutuações da marca de elementos flutuantes podem ser arrastadas. Nesse caso, deixe a camada flutuante se mover com o mouse e ignore -o se não.
3. Quando o mouse é liberado, o elemento flutuante não pode ser arrastado.
4.js arrastar e soltar usa principalmente três eventos de mouse: Mousedown, Mousemove e MouseUp.
Mousedown: pressione o mouse
MouseUp: Libere o mouse
MouseMove: Move do mouse
NOTA : A diferença entre Mousedown e Click: Todo o processo de cliques de Mousedown ocorrerá com três eventos: Mousedown → MouseUp → Clique e clique não ocorrerá após o lançamento do mouse no final.
Falando nisso, temos que falar sobre o evento do mouse.
Vamos falar brevemente sobre o evento do mouse abaixo:
(1) Clique em Evento
(2) Evento do DBCLICK
(3) Evento de Mousedown
(4) Evento do MouseUp
(5) Evento do MouseEnter
(6) Evento de MouseOver
(7) Evento de Mouseleaver
(8) Evento do MouseOut
Explicação : (A explicação do evento do mouse é selecionada no W3School)
(1) Clique em Evento: O evento de clique é acionado quando o usuário toca o botão esquerdo do mouse no elemento e libera o botão esquerdo no mesmo elemento.
(2) Evento do DBCLICK: Quando o elemento é clicado duas vezes, o evento DBLClick ocorrerá. Um clique ocorre quando o ponteiro do mouse fica acima do elemento e pressiona e libera o botão esquerdo do mouse. Dois cliques ocorrem em um tempo muito curto, o que é um evento de clique duplo.
Exemplo:
Ao clicar duas vezes no botão, ocultar ou exibir o elemento:
$ (document) .ready (function () {$ ("botão"). dblClick (function () {$ ("p"). slideToggle ();});});(3) Evento de Mousedown: Quando o ponteiro do mouse se move acima do elemento e pressiona o botão do mouse, o evento de Mousedown ocorrerá. Ao contrário do evento de clique, o evento Mousedown exige que a chave seja pressionada e não precisa ser liberada para ocorrer.
$ (document) .ready (function () {$ ("botão"). mousedown (function () {$ ("p").(4) Evento do MouseUp: Quando o botão do mouse estiver relaxado no elemento, o evento MouseUp ocorrerá.
Ao contrário do evento de clique, o evento MouseUp requer apenas um botão de relaxamento. Quando o ponteiro do mouse está acima do elemento, o botão Relax Mouse aciona o evento.
$ (document) .ready (function () {$ ("button"). mouseup (function () {$ ("p"). slidetoGgle ();});});(5) Evento do MouseEnter: Quando o ponteiro do mouse passa por um elemento, o evento MouseEnter ocorrerá. Este evento é usado na maioria das vezes com o evento Mouseleave.
Nota: Ao contrário do evento MouseOver, o evento MouseEnter será acionado apenas quando o ponteiro do mouse passar pelo elemento selecionado. Se o ponteiro do mouse passar por algum elemento filho, o evento MouseOver também será acionado.
(6) Evento do MouseOver: Quando o ponteiro do mouse estiver acima do elemento, o evento MouseOver ocorrerá. Este evento é usado na maioria das vezes com o evento MouseOut.
Nota: Ao contrário do evento MouseEnter, o evento MouseOver será acionado, independentemente de o ponteiro do mouse passar pelo elemento selecionado ou seu elemento filho. O evento MouseEnter só será acionado quando o ponteiro do mouse passar pelo elemento selecionado.
$ (document) .ready (function () {$ ("p"). mouseover (function () {$ ("p"). css ("cor de fundo", "amarelo");}); $ ("p"). mouseout (function () {$ ("P").A diferença entre MouseEnter e MouseOver
<html> <head> <script type = "text/javascript" src = "/jquery/jquery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (document) .ready (function () {$ ("div.over"). mouseOver (function () {$ (". </script> </ad Head> <body> <p> O evento MouseOver será acionado, independentemente de o ponteiro do mouse passar pelo elemento selecionado ou seu elemento filho. </p> <p> O evento MouseEnter será acionado apenas quando o ponteiro do mouse passar pelo elemento selecionado. </p> <div style = "cor de fundo: LightGray; preenchimento: 20px; largura: 40%; float: esquerda"> <h2 style = "background-color: white;"> mouseOver flashed Event: <span> </span> </h2> </div> <Div Style = "Background-Color: LightGray; Padding: 20px; Wlthth: 40; Style = "Background-Color: White;"> Evento do MouseEnter Flashed: <span> </span> </h2> </div> </body> </html>(7) Evento de Mouseleaver: Quando o ponteiro do mouse passa por um elemento, o evento MouseEnter ocorrerá.
Este evento é usado na maioria das vezes com o evento Mouseleave.
Nota: Ao contrário do evento MouseOut, o evento Mouseleave será acionado apenas quando o ponteiro do mouse deixar o elemento selecionado. Se o ponteiro do mouse deixar algum elemento filho, o evento do MouseOut também será acionado.
(8) Evento do MouseOut
O evento MouseOut ocorre quando o ponteiro do mouse é afastado do elemento.
Este evento é usado na maioria das vezes com o evento MouseOver.
Nota: Ao contrário do evento Mouseleave, o evento MouseOut será acionado, independentemente de o ponteiro do mouse deixar o elemento selecionado ou qualquer elemento filho. O evento Mouseleave será acionado apenas quando o ponteiro do mouse deixar o elemento selecionado.
Por favor, veja a seguinte demonstração de exemplo.
<html> <head> <script type = "text/javascript" src = "/jquery/jquery.js"> </script> <script type = "text/javascript"> x = 0; y = 0; $ (document) .ready (function () {$ ("div.out"). mouseout (function () {$ (". out span"). text (x+= 1);}); $ ("div.leave"). </script> </ad Head> <body> <p> O evento MouseOut será acionado, independentemente de o ponteiro do mouse deixar o elemento selecionado ou qualquer elemento filho. </p> <p> O evento Mouseleave será acionado apenas quando o ponteiro do mouse deixar o elemento selecionado. </p> <div style = "cor de fundo: LightGray; preenchimento: 20px; largura: 40%; float: esquerda"> <h2 style = "background-color: white;"> Evento do mouseout flashed: <span> </span> </h2> </div> <divindade "" color: Lightgray; Padding: 20px; Wlthth: 40; Style = "Background-Color: White;"> Evento de mouseleave piscado: <pan> </span> </h2> </div> </body> </html>Nota: Este artigo é original, endereço: http://www.cnblogs.com/wanghuih/p/5569438.html
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.