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“

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

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

Bedarfsanalyse

Konkrete Umsetzung

Effektanzeige

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

MySQL-Grundlagen-Tutorial Teil 1 MySQL5.7.18 Installations- und Verbindungs-Tutorial

22 Vue-Optimierungstipps (Projektpraxis)

Zen-Codierung für Editplus – Beispielcodebeschreibung

Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

So installieren Sie MySQL 8.0.17 und konfigurieren den Fernzugriff

So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

Eine Falle und Lösung bei der Verwendung von fileReader

Beispiel für die Erstellung eines XML-Online-Editors mit js

HTML-Formularanwendung beinhaltet die Verwendung von Kontrollkästchen und Optionsfeldern

Artikel empfehlen

Einführung in die Linux-Dateikomprimierung und -Verpackung

Vue realisiert die Bildschirmanpassung von Großbildschirmseiten

Hinweise zur Verwendung von $refs in Vue-Instanzen

Lösung für das Fehlen der my.ini-Datei in MySQL 5.7

CSS3 implementiert einen Fußbereich, der unten fixiert ist (immer unten, egal wie hoch die Seite ist).

Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0

MySQL 5.7 Installations- und Konfigurations-Tutorial unter CentOS7 64 Bit

Detaillierte Erläuterung des Dezimal-Padding-Problems des Dezimal-Datentyps in MySQL

JavaScript implementiert einfache Rechnerfunktion

Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile

Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien

Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML

Eine einfache Möglichkeit, Desktop-Exe-Programme auf einer Webseite aufzurufen