Este ejemplo compartirá con usted el código de implementación específico de la ventana de arrastre emergente de JavaScript para su referencia. El contenido específico es el siguiente
Descripción del requisito:
1. Haga clic en el botón de página para aparecer por la ventana;
2. Tener una máscara de fondo translúcida;
3. La ventana emergente tiene esquinas redondeadas, la ventana es translúcida, pero el contenido es opaco; con sombra;
4. La ventana se puede arrastrar;
5. Después de que la resistencia se detiene, la posición de la ventana permanece sin cambios al desplazar la página;
6. Puedes usar jQuery;
7. Hay un botón de cierre;
Descripción funcional adicional:
Haga clic en el botón y habrá una capa flotante que se puede arrastrar.
Hay una máscara de fondo que admite arrastrar y soltar la barra de título. Arrastrarse fuera del área de la barra de título no tiene ningún efecto. La función de arrastre es limitada y su función de arrastre se limita al área visible.
Ideas de arrastre:
Obtenga la posición del mouse. Cuando el mouse se mueva, obtenga la posición del mouse, obtenga el eje x y el eje y asigna al eje X de la ventana y haga que la ventana se coloque absolutamente. Cancele este evento cuando se lance el mouse.
El principio de implementación de arrastrar y soltar:
Cuando el mouse se mueve, la posición de coordenada de la capa flotante se actualiza constantemente cuando el mouse se mueve.
1. Cuando el mouse presiona el elemento flotante, marque el elemento flotante que se pueda arrastrar.
2. Cuando se mueve el mouse, primero verificamos si las fluctuaciones de la marca del elemento flotante se pueden arrastrar. Si es así, deje que la capa flotante se mueva con el mouse e ignórelo si no.
3. Cuando se libera el mouse, el elemento flotante no se puede arrastrar.
4.Js arrastre y suelta principalmente usa tres eventos de mouse: mousedown, mousemove y mouseup.
Mousedown: presione el ratón
MouseUp: suelte el mouse
MouseMove: Movimiento del mouse
NOTA : La diferencia entre MouseDown y Haga clic: El proceso completo de hacer clic en MouseDown se producirá con tres eventos: MouseDown → MouseUp → Haga clic y haga clic después de que el mouse se libere al final.
Hablando de esto, tenemos que hablar sobre el evento del mouse.
Hablemos brevemente sobre el evento del mouse a continuación:
(1) Haga clic en el evento
(2) evento DBClick
(3) Evento de Mousedown
(4) Evento de ratón
(5) Evento de mouseenter
(6) Evento de Mouseover
(7) Evento MouseLeaver
(8) Evento de ratón
Explicación : (La explicación del evento del ratón se selecciona de W3School)
(1) Haga clic en el evento: el evento de clics se activa cuando el usuario aprovecha el botón del mouse izquierdo en el elemento y libera el botón izquierdo en el mismo elemento.
(2) Evento DBClick: cuando el elemento se hace doble clic, se producirá el evento DBLClick. Se produce un clic cuando el puntero del mouse permanece por encima del elemento y luego presiona y libera el botón del mouse izquierdo. Dos clics ocurren en muy poco tiempo, que es un evento de doble clic.
Ejemplo:
Al hacer doble clic en el botón, oculte o muestre el elemento:
$ (documento) .Ready (function () {$ ("botón"). dblClick (function () {$ ("p"). slidEtoggle ();});});(3) Evento de mouseDown: cuando el puntero del mouse se mueve por encima del elemento y presiona el botón del mouse, el evento MouseDown se producirá. A diferencia del evento de clic, el evento MouseDown solo requiere que se presione la tecla y no es necesario que se libere.
$ (documento) .Ready (function () {$ ("botón"). mouseDown (function () {$ ("p"). slidEtoggle ();});});(4) Evento de mouseup: cuando el botón del mouse se relaja en el elemento, se producirá el evento de mouseup.
A diferencia del evento de clic, el evento MouseUp solo requiere un botón de relajación. Cuando el puntero del mouse está por encima del elemento, el botón RELAJA del mouse desencadena el evento.
$ (documento) .Ready (function () {$ ("botón"). MouseUp (function () {$ ("p"). slidEtoggle ();});});(5) Evento del ratón: cuando el puntero del mouse pasa a través de un elemento, se producirá el evento del mouseenter. Este evento se usa la mayor parte del tiempo con el evento Mouseleave.
Nota: A diferencia del evento Mouseover, el evento Mouseenter solo se activará cuando el puntero del mouse pase a través del elemento seleccionado. Si el puntero del mouse pasa a través de cualquier elemento infantil, el evento Mouseover también se activará.
(6) Evento de Mouseover: cuando el puntero del mouse está por encima del elemento, se producirá el evento Mouseover. Este evento se usa la mayor parte del tiempo con el evento MouseOut.
Nota: A diferencia del evento Mouseenter, el evento Mouseover se activará independientemente de si el puntero del mouse pasa a través del elemento seleccionado o su elemento infantil. El evento Mouseenter solo se activará cuando el puntero del mouse pase a través del elemento seleccionado.
$ (documento) .Ready (function () {$ ("p"). mouseover (function () {$ ("p"). css ("de fondo de fondo", "amarillo");}); $ ("p"). mouseout (function () {$ ("p"). css ("color de fondo", "#e9e9e4");});});});});La diferencia entre Mouseenter y MouseOver
<html> <fead> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javaScript"> x = 0; y = 0; $ (documento) .Ready (function () {$ ("div.over"). mouseover (function () {$ (". Over span"). Text (x+= 1);}); $ ("div.enter"). mouseenter (function () {$ (". Enter span"). Text (y+= 1);});}); </script> </head> <body> <p> El evento Mouseover se activará independientemente de si el puntero del mouse pasa a través del elemento seleccionado o su elemento infantil. </p> <p> El evento del mouseenter solo se activará cuando el puntero del mouse pase a través del elemento seleccionado. </p> <div style = "fondo de fondo: lightgray; relleno: 20px; ancho: 40%; float: izquierda"> <h2 style = "Color de fondo: blanco;"> Evento de mouseover flashado: <span> </span> </h2> </div> <div style = "de fondo: Lightgray; Padding: 20px; Width: 40%; Float: Right" H2 H2 style = "Background-Color: White;"> Evento de Mouseenter flashed: <span> </span> </h2> </div> </body> </html>(7) Evento del mouseLeaver: cuando el puntero del mouse pasa a través de un elemento, se producirá el evento del mouseenter.
Este evento se usa la mayor parte del tiempo con el evento Mouseleave.
Nota: A diferencia del evento MouseOut, el evento Mouseleave solo se activará cuando el puntero del mouse deja el elemento seleccionado. Si el puntero del mouse deja elementos infantiles, el evento MouseOut también se activará.
(8) Evento de ratón
El evento de ratón ocurre cuando el puntero del mouse se aleja del elemento.
Este evento se usa la mayor parte del tiempo con el evento Mouseover.
Nota: A diferencia del evento Mouseleave, el evento MouseOut se activará independientemente de si el puntero del mouse deja el elemento seleccionado o cualquier elemento infantil. El evento Mouseleave solo se activará cuando el puntero del mouse deja el elemento seleccionado.
Consulte la siguiente demostración de ejemplo.
<html> <fead> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javaScript"> x = 0; y = 0; $ (documento) .Ready (function () {$ ("Div.out"). Mouseout (function () {$ (". Out Span"). Text (x+= 1);}); $ ("Div.leeve"). MouseLeave (function () {$ (". Left Span"). Text (y+= 1);});}); </script> </head> <body> <p> El evento MouseOut se activará independientemente de si el puntero del mouse deja el elemento seleccionado o cualquier elemento infantil. </p> <p> El evento Mouseleave solo se activará cuando el puntero del mouse deja el elemento seleccionado. </p> <div style = "Color de fondo: LightGray; Padding: 20px; Width: 40%; Float: Left"> <H2 Style = "Color de fondo: White;"> Evento de ratón flashado: <span> </span> </h2> </div> <Div style = "de fondo: Lightgray; Pading: 20px; Width: 40%; Float: Right" H2 H2 H2 style = "Background-Color: White;"> Evento de Mouseleave flasheado: <span> </span> </h2> </div> </body> </html>Nota: Este artículo es original, dirección: http://www.cnblogs.com/wanghuih/p/5569438.html
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.