In diesem Beispiel wird Ihnen der spezifische Implementierungscode des JavaScript-Popup-Drag-Fensters für Ihre Referenz mitgeteilt. Der spezifische Inhalt ist wie folgt
Anforderung Beschreibung:
1. Klicken Sie auf die Schaltfläche Seite, um das Fenster aufzunehmen.
2. Haben Sie eine durchscheinende Hintergrundmaske;
3. Das Popup-Fenster hat abgerundete Ecken, das Fenster ist durchscheinend, der Inhalt ist jedoch undurchsichtig. mit Schatten;
4. Das Fenster kann gezogen werden;
5. Nachdem der Widerstand stoppt, bleibt die Fensterposition beim Scrollen der Seite unverändert.
6. Sie können JQuery verwenden;
7. Es gibt einen Schließknopf;
Weitere funktionale Beschreibung :
Klicken Sie auf die Schaltfläche und es gibt eine schwimmende Ebene, die herausgezogen werden kann.
Es gibt eine Hintergrundmaske, die das Ziehen und Ablegen der Titelleiste unterstützt. Das Ziehen außerhalb des Titelbalkenbereichs hat keinen Einfluss. Die Widerstandsfunktion ist begrenzt und ihre Widerstandsfunktion ist auf den sichtbaren Bereich begrenzt.
Ideen ziehen:
Holen Sie sich die Position der Maus. Wenn sich die Maus bewegt, holen Sie sich die Position der Maus, holen Sie sich die x-Achse y-Achse, weisen Sie sie der X-Achse des Fensters y-Achse zu und lassen Sie das Fenster absolut positioniert. Absagen dieses Ereignis, wenn die Maus veröffentlicht wird.
Das Implementierungsprinzip von Drag & Drop:
Wenn sich die Maus bewegt, wird die Koordinatenposition der schwimmenden Schicht ständig aktualisiert, wenn sich die Maus bewegt.
1. Wenn die Maus auf das schwimmende Element drückt, markieren Sie das schwimmende Element, wie sie gezogen werden kann.
2. Wenn sich die Maus bewegt, prüfen wir zunächst, ob die Schwankungen der schwimmenden Elementmarke gezogen werden können. Wenn ja, lassen Sie die schwimmende Schicht sich mit der Maus bewegen und ignorieren Sie sie, wenn nicht.
3. Wenn die Maus freigesetzt wird, kann das schwimmende Element nicht gezogen werden.
4.Js Drag & Drop verwendet hauptsächlich drei Mausereignisse: Mousedown, Mousemove und MouseUp.
Mousedown: Drücken Sie die Maus
MouseUp: Lösen Sie die Maus
Mousemove: Mausbewegung
HINWEIS : Der Unterschied zwischen Mousedown und Click: Der gesamte Prozess von MouseDown -Klicken tritt mit drei Ereignissen auf: Mousedown → MouseUp → Klicken und klicken Sie nicht, nachdem die Maus am Ende veröffentlicht wurde.
Apropos, wir müssen über das Mausereignis sprechen.
Lassen Sie uns kurz über das Mausereignis unten sprechen:
(1) Klicken Sie auf Ereignis
(2) DBCLICK -Event
(3) Mouedown -Event
(4) Mausup -Event
(5) Mouseenter -Ereignis
(6) Mausover -Event
(7) Mouseleaver -Ereignis
(8) Mausout -Event
Erläuterung : (Die Erläuterung des Mausereignisses wird aus der W3school ausgewählt)
(1) Klicken Sie auf Ereignis: Das Klickenereignis wird ausgelöst, wenn der Benutzer die linke Maustaste auf das Element aufnimmt und die linke Schaltfläche auf demselben Element freigibt.
. Ein Klick tritt auf, wenn der Mauszeiger über dem Element bleibt und dann die linke Maustaste drückt und freigibt. In sehr kurzer Zeit treten zwei Klicks auf, was ein Doppelklickereignis ist.
Beispiel:
Beim Doppelklicken auf die Taste ausblenden oder anzeigen Sie das Element an:
$ (document) .ready (function () {$ ("button"). dblClick (function () {$ ("p").(3) Mouedown -Ereignis: Wenn sich der Mauszeiger über dem Element bewegt und die Maustaste drückt, tritt das MouseDown -Ereignis auf. Im Gegensatz zum Click -Ereignis muss das MouseDown -Ereignis nur die Taste gedrückt werden und muss nicht freigegeben werden.
$ (document) .ready (function () {$ ("button"). MouseDown (function () {$ ("p"). Slidetoggle ();});});(4) Mausup -Ereignis: Wenn die Maustaste auf dem Element gelockert ist, tritt das Mausup -Ereignis auf.
Im Gegensatz zum Click -Ereignis erfordert das Mausup -Ereignis nur eine Entspannungsschaltfläche. Wenn der Mauszeiger über dem Element liegt, löst die Relax -Maustaste das Ereignis aus.
$ (document) .ready (function () {$ ("button"). mauseup (function () {$ ("p"). Slidetoggle ();});});(5) MouseNter -Ereignis: Wenn der Mauszeiger ein Element durchläuft, wird das Mouseenter -Ereignis auftreten. Dieses Ereignis wird die meiste Zeit mit dem Mouseleave -Ereignis verwendet.
HINWEIS: Im Gegensatz zum Mausover -Ereignis wird das MouseNeer -Ereignis nur ausgelöst, wenn der Mauszeiger das ausgewählte Element durchläuft. Wenn der Mauszeiger durch Kinderelemente durchläuft, wird auch das Mausover -Ereignis ausgelöst.
(6) Mausover -Ereignis: Wenn der Mauszeiger über dem Element liegt, tritt das Mausover -Ereignis auf. Diese Veranstaltung wird die meiste Zeit mit dem Mausout -Event verwendet.
HINWEIS: Im Gegensatz zum MouseNter -Ereignis wird das Mausover -Ereignis ausgelöst, unabhängig davon, ob der Mauszeiger das ausgewählte Element oder sein untergeordnetes Element durchläuft. Das Mausenterereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element durchläuft.
$ (document) .ready (function () {$ ("p"). mouseover (function () {$ ("p"). CSS ("Hintergrundfarbe", "gelb");});Der Unterschied zwischen Mausenter und Mausover
<html> <kopf> <skript type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javaScript"> x = 0; y = 0; $ (document) .ready (function () {$ ("div.over"). mouseover (function () {$ (". Over span"). text (x+= 1);}); </script> </head> <body> <p> Das Mausover -Ereignis wird ausgelöst, unabhängig davon, ob der Mauszeiger das ausgewählte Element oder sein untergeordnetes Element durchläuft. </p> <p> Das Mausenterereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element durchläuft. </p> <div style = "Hintergrundfarbe: LightGray; Padding: 20px; Breite: 40%; Float: Left"> <H2 Style = "Hintergrundfarbe: Weiß;"> Flased Mouseover-Ereignis: <spannung> </span> </h2> </div> <div. style = "Hintergrundfarbe: Lightgray; Padding: 20px; Breite: 40%; style = "Hintergrundfarbe: Weiß;"> Flased Mouseenter Ereignis: <span> </span> </h2> </div> </body> </html>(7) Mouseleaver -Ereignis: Wenn der Mauszeiger ein Element durchläuft, tritt das Mausenterereignis auf.
Dieses Ereignis wird die meiste Zeit mit dem Mouseleave -Ereignis verwendet.
HINWEIS: Im Gegensatz zum Mausout -Ereignis wird das Mouseleave -Ereignis nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt. Wenn der Mauszeiger Kinderelemente verlässt, wird auch das Mausout -Ereignis ausgelöst.
(8) Mausout -Event
Das Mausout -Ereignis tritt auf, wenn der Mauszeiger aus dem Element entfernt wird.
Diese Veranstaltung wird die meiste Zeit mit dem Mausover -Event verwendet.
HINWEIS: Im Gegensatz zum Mouseleave -Ereignis wird das Mausout -Ereignis unabhängig davon ausgelöst, ob der Mauszeiger das ausgewählte Element oder jedes untergeordnete Element verlässt. Das Mouseleave -Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt.
Bitte beachten Sie die folgende Beispieldemonstration.
<html> <kopf> <skript 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);}); </script> </head> <body> <p> Das Mausout -Ereignis wird ausgelöst, unabhängig davon, ob der Mauszeiger das ausgewählte Element oder ein beliebiges untergeordnetes Element verlässt. </p> <p> Das Mouseleave -Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt. </p> <div style = "Hintergrundfarbe: LightGray; Padding: 20px; Breite: 40%; Float: links"> <H2 style = "Hintergrundfarbe: Weiß;"> Flased Mausout Ereignis: <spannung> </span> </h2> </div> <div. style = "Hintergrundfarbe: LightGray; Padding: 20px; Breite: 40%; style = "Hintergrundfarbe: Weiß;"> Flashed Mouseleave Ereignis: <span> </span> </h2> </div> </body> </html>Hinweis: Dieser Artikel ist original, Adresse: http://www.cnblogs.com/wanghuih/p/5569438.html
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.