Javascript um den Drag-Effekt der Login-Box zu erreichen

Javascript um den Drag-Effekt der Login-Box zu erreichen

In diesem Artikel wird der spezifische Code von Javascript zur Erzielung des Drag-Effekts des Anmeldefelds zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Bedarfsanalyse

1. Klicken Sie auf das Popup-Login-Feld

2. Sie können das Anmeldefeld an eine beliebige Position im spezifischen Bereich des Anmeldefelds ziehen

3. Sie können das Anmeldefeld schließen. Das Popup-Anmeldefeld wird beim nächsten Klicken an seine ursprüngliche Position zurückgesetzt.

Konkrete Umsetzung

Vollständiger Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
        A {
            Textdekoration: keine;
            Farbe: Schwarz;
        }
        .login-header {
           /* Rand: 0 auto; */ /* Damit dies funktioniert, muss die Breite festgelegt werden*/
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Schriftgröße: 24px;
            Textausrichtung: zentriert;
        }
        .Anmelden {
            Breite: 500px;
            Höhe: 300px;
            Position: absolut;
            Rand: #725252 durchgezogen 1px;
           /* transformieren: übersetzen(-50%,-50%); */
            links: 50%;
            oben: 50 %;
            /* Hier kann es keinen Rand geben, da wir nur links und rechts geändert haben und der Rand nach der Verschiebung wieder wirksam wird, was zu einem Fehler führt */
           /* Rand links: -250px;
            Rand oben: 50px; */
            Hintergrundfarbe: Muschel;
            transformieren: übersetzen(-50 %, -50 %);
            Z-Index: 9999;
            Box-Shadow: 0 0 30px schwarz;
            Anzeige: keine;
            
        }
        .login-titel {
            Position: relativ;
            Rand: 20px 0 0 0;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
            Schriftgröße: 20px;
            Cursor: bewegen;
        }
        .schließen-btn {
            Position: absolut;
            Breite: 30px;
            Höhe: 30px;
            rechts: -15px;
            oben: -35px;
            Randradius: 50 %;
            Hintergrundfarbe: #ffffff;
            Zeilenhöhe: 30px;
        }
        .login-content{
            Rand: 15px automatisch;
            Breite: 450px;
            Höhe: 230px;
        }
        .login-input Bezeichnung{
            Rand oben: 20px;
            Rand links: 30px;
            Breite: 100px;
            Textausrichtung: rechts;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Anzeige: Inline-Block;
        }
        .loginput Eingabe {
            Höhe: 30px;
            Breite: 230px;
            Rahmenradius: 10px;
            Rand: 1px durchgezogen rgba(0, 0, 0, .5);
        }
        .login-btn {
            Breite: 100px;
            Höhe: 50px;
            Rand: 30px automatisch;
            Rand: 1px tief schwarz;
            Rahmenradius: 7px;
            Zeilenhöhe: 50px;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>
<Text>
    <div class="login-header"><a href="javascript:;" >Anmelde-Popup-Anmeldefeld</a></div>
    <div Klasse="Anmelden">
        <div class="login-title">Anmelden<span><a href="javascript:;" class="close-btn">x</a></span>
        </div>
        <div Klasse="Anmeldeinhalt">
                <div Klasse="Anmeldeeingabe">
                    <label für="name">Konto:</label>
                    <Eingabetyp="Text" id="Name">
                </div>
                <div Klasse="Anmeldeeingabe">
                    <label for="pwd">Anmeldekennwort:</label>
                    <input type="password" id="pwd">
                </div>
                <div class="login-btn">Anmelden</div>
        </div>
    </div>
    <Skript>
        Geben Sie den Query-Selector ein, der die Abfrage verarbeitet.
        let login_box = document.querySelector('.login');
        let title = document.querySelector('.login-title');
        Lassen Sie uns schließen = document.querySelector('.close-btn');
        let move = document.querySelector('.login-content');
        out.addEventListener('klicken',Funktion() {
            login_box.style.display = "Block";
        });
        schließen.addEventListener('klicken',Funktion () {
            login_box.style.left = 50 + "%";
                login_box.style.top = 50 + '%';
            login_box.style.display = "keine";
        });
        /*Nur der Titel kann verschoben werden*/
        Titel.addEventListener('mousedown',Funktion(e) {
            /* Berechne den Abstand der Maus im Titel zum Zeitpunkt des Mausklicks und behalte ihn unverändert bei bis zum nächsten Mausklick*/
            /* Hier muss der Offset der Login-Box verwendet werden, da sich vor dem Titel eine absolut positionierte Login-Box befindet und ihr Offset 0 ist */
            let mousex = e.pageX - login_box.offsetLeft;
            let mousey = e.pageY - login_box.offsetTop;
            Konsole.log(Maussex, Mausey);
            /* Warum wird hier „document“ statt „title“ verwendet? Der Grund ist, dass sich die Maus möglicherweise zu schnell bewegt und den Umfang des Titels überschreitet. Ein weiterer Grund ist, zu verhindern, dass das Titelfeld blockiert wird. Wenn sich die Maus nicht auf dem Titel befindet, kann sie das Ereignis „Verschieben und Abbrechen“ nicht auslösen und kann daher nicht ungültig gemacht werden.*/
            Funktion movee(e) {
                login_box.style.left = e.pageX - mousex + 'px';
                login_box.style.top = e.pageY - mousey + 'px';
                
            }
            document.addEventListener('Mausbewegung',Bewegung)
            document.addEventListener('mouseup',Funktion () {
                
                document.removeEventListener('Mausbewegung',Bewegung)
            })
        });
    
    </Skript>
</body>
</html>

So implementieren Sie das Popup-Anmeldefeld

Verwenden Sie ein JavaScript-Klickereignis und stellen Sie die Anzeige des Anmeldefelds so ein, dass die Blockierung aufgehoben wird, wenn auf das Popup geklickt wird.

out.addEventListener('klicken',Funktion() {
            login_box.style.display = "Block";
        });

Implementierung des Drag-Effekts

Die Umsetzung des Drag-Effektes gliedert sich in drei Schritte:

  • Maus gedrückt, erhalte die Koordinaten der Maus im Login-Feld
  • Bewegen Sie die Maus, um die Position zu erhalten, an die sich das Anmeldefeld bewegt
  • Lassen Sie die Maustaste los, um das Mausbewegungsereignis abzubrechen.

1. Drücken Sie die Maus, um die Koordinaten der Maus im Login-Feld zu erhalten

Wie erhält man die Position der Maus im Anmeldefeld? Hier verwenden wir die Koordinaten der Maus auf der Seite abzüglich des linken Rands des Anmeldefelds.

Aus der obigen Abbildung können wir ableiten, dass die Koordinaten der Maus im Anmeldefeld wie folgt lauten: (x, y) = (Seite X − Offset links, Seite Y − Offset oben) (x, y) = (Seite X - Offset links, Seite Y - Offset oben) (x, y) = (Seite X − Offset links, Seite Y − Offset oben)
Der Einfluss der Umrandung auf den Versatz wird hierbei selbstverständlich nicht berücksichtigt.

/* Berechne den Abstand der Maus im Titel zum Zeitpunkt des Mausklicks und behalte ihn unverändert bei bis zum nächsten Mausklick*/
/* Hier muss der Offset der Login-Box verwendet werden, da sich vor dem Titel eine absolut positionierte Login-Box befindet und ihr Offset 0 ist */
let mousex = e.pageX - login_box.offsetLeft;
let mousey = e.pageY - login_box.offsetTop;

2. Bewegen Sie die Maus, um den Standort des Anmeldefelds zu erhalten

Zu diesem Zeitpunkt ändert sich die Position der Maus im Anmeldefeld nicht, bis die Maus losgelassen wird. Wir können diese Funktion verwenden, um die aktuelle Position des Anmeldefelds abzurufen. Das heißt, die Koordinaten der Maus auf der Seite minus die Koordinaten der Maus auf der Seite. Auf weitere Erläuterungen gehe ich hier nicht ein.

/* Warum wird hier „document“ statt „title“ verwendet? Der Grund ist, dass sich die Maus möglicherweise zu schnell bewegt und den Umfang des Titels überschreitet. Ein weiterer Grund ist, zu verhindern, dass das Titelfeld blockiert wird. Wenn sich die Maus nicht auf dem Titel befindet, kann sie das Ereignis „Verschieben und Abbrechen“ nicht auslösen und kann daher nicht ungültig gemacht werden.*/
            Funktion movee(e) {
                login_box.style.left = e.pageX - mousex + 'px';
                login_box.style.top = e.pageY - mousey + 'px';
                
            }
            document.addEventListener('Mausbewegung',Bewegung)

3. Lassen Sie die Maus los, um das Mausbewegungsereignis abzubrechen

document.addEventListener('mouseup',Funktion () {
                document.removeEventListener('Mausbewegung',Bewegung)
            })

Schließen Sie das Anmeldefeld und kehren Sie zur ursprünglichen Position zurück.

Stellen Sie die Anzeige einfach auf „Keine“ ein. Weitere Einzelheiten finden Sie im Code.

schließen.addEventListener('klicken',Funktion () {
            login_box.style.left = 50 + "%";
            login_box.style.top = 50 + '%';
            login_box.style.display = "keine";
        });

Effektanzeige

Schwierigkeiten bei der Implementierung des Codes

1. Wenn Sie einen Rand zum Zentrieren verwenden, müssen Sie die Breite haben. Ich habe lange keinen Code mehr geschrieben und habe es vergessen.
2. Da ich den Rand für das Anmeldefeld festgelegt habe, bewegt es sich aus seiner Position. Das liegt daran, dass meine Formel zur Koordinatenberechnung den Rand nicht berücksichtigt (sie berücksichtigt nur die linke und rechte Seite der Positionierung). Infolgedessen erreicht das Anmeldefeld die Koordinatenposition und passt seine Position dann aufgrund von magin erneut an. Die Lösung sollte darin bestehen, bei der Berechnung der Bewegungskoordinaten den Rand abzuziehen.
3. Der Versatz ist relativ zum positionierten übergeordneten Knoten, also behalten Sie ihn im Hinterkopf.
4. Warum ist die Mausbewegung ein an das Dokument gebundenes Ereignis?

Um zu verhindern, dass zu schnelle Mausbewegungen nicht richtig verarbeitet werden, ist das Ereignis an das Dokument gebunden. Wenn das Anmeldefeld nicht absolut positioniert ist, kann es während des Verschiebungsprozesses durch andere Elemente blockiert werden, sodass das Verschiebungsereignis nicht an das Anmeldefeld, sondern an das Dokument gebunden werden kann.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js realisiert den Mauszeigereffekt des Anmeldefelds
  • js realisiert den Mauszeigereffekt des Baidu-Anmeldefelds
  • Natives JS zum Erstellen eines verschiebbaren Anmeldefelds

<<:  Nginx implementiert ein Codebeispiel für die https-Websitekonfiguration

>>:  Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“

Artikel empfehlen

Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter

Karten-Tags müssen paarweise vorkommen, d. h. <...

So erstellen Sie Benutzer und verwalten Berechtigungen in MySQL

1. So erstellen Sie einen Benutzer und ein Passwo...

Beispiel für einen Vue-Übergang zum Erreichen eines Animationseffekts

Inhaltsverzeichnis Ergebnisse auf einen Blick Her...

So installieren und konfigurieren Sie den Supervisor-Daemon unter CentOS7

Neuling, nimm es selbst auf 1. Supervisor install...

jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts

In diesem Artikel wird der spezifische Code von j...

Lösen Sie das Installationsproblem der mysql8.0.19 Winx64-Version

MySQL ist ein kleines relationales Open-Source-Da...

MySQL praktische Fensterfunktion SQL-Analyse Klasse Testergebnisse und Lebenshaltungskosten Studenten

Inhaltsverzeichnis 1. Hintergrund 2. Anweisungen ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows-Version)

1. Einleitung Im Projekt wird MySQL verwendet. Ic...

Docker-Bereitstellung von Implementierungsschritten für Flask-Anwendungen

1. Zweck Schreiben Sie lokal eine Flask-Anwendung...

MySQL 5.6.27 Installations-Tutorial unter Linux

In diesem Artikel finden Sie das Installations-Tu...

Lösung für das Problem, dass der Windows Server 2008 R2-Server ohne Grund automatisch neu gestartet wird

Der Windows Server 2008-Server wird automatisch n...

Tutorial zur Installation von Docker im Windows 10-Subsystem Ubuntu (WSL) (mit Bildern und Text)

Inhaltsverzeichnis Umgebungsbeschreibung Installi...

So legen Sie mit CSS eine Hintergrundunschärfe fest

Beim Erstellen einiger Seiten müssen wir häufig H...

JavaScript zum Erreichen der Produktabfragefunktion

In diesem Artikelbeispiel wird der spezifische Ja...

Apropos „Weniger und mehr“ im Webdesign (Bild)

„Weniger ist mehr“ ist ein Schlagwort vieler Desi...