Natives JS zum Erstellen eines verschiebbaren Anmeldefelds

Dieser Artikel zeigt ein verschiebbares Anmeldefeld, das mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Der implementierte Code lautet wie folgt:

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
 
    <title>Natives JS zur Implementierung eines verschiebbaren Anmeldefelds</title>
 
    <style type="text/css">
        Körper {
            /* Hintergrundbild */
            Hintergrund: URL (Bilder/0.png) #fff oben Mitte, keine Wiederholung;
            Polsterung: 0px;
            Rand: 0px;
            Schriftgröße: 12px;
            Schriftfamilie: „Microsoft YaHei“;
        }
 
        .Verknüpfung {
            Textausrichtung: rechts;
            Zeilenhöhe: 20px;
            Polsterung rechts: 40px;
        }
 
        .ui-dialog {
            Breite: 380px;
            Höhe: automatisch;
            Anzeige: keine;
            Position: absolut;
            Z-Index: 9000;
            oben: 0px;
            links: 0px;
            Rand: 1px durchgezogen #D5D5D5;
            Hintergrund: #fff;
        }
 
        .ui-dialog ein {
            Textdekoration: keine;
        }
 
        .ui-dialog-title {
            Höhe: 48px;
            Zeilenhöhe: 48px;
            Polsterung: 0px 20px;
            Farbe: #535353;
            Schriftgröße: 16px;
            Rahmen unten: 1px durchgezogen #efefef;
            Hintergrund: #f5f5f5;
            Cursor: bewegen;
            Benutzerauswahl: keine;
        }
 
        .ui-dialog-closebutton {
            Breite: 16px;
            Höhe: 16px;
            Anzeige: Block;
            Position: absolut;
            oben: 12px;
            rechts: 20px;
            /* Symbol „Anmeldefeld schließen“*/
            Hintergrund: URL (Bilder/1.png) keine Wiederholung;
            Cursor: Zeiger;
 
        }
 
        .ui-dialog-closebutton:hover {
            /* Schließen Sie das Symbol des Anmeldefelds, wenn Sie mit der Maus darüber fahren */
            Hintergrund: URL (Bilder/2.png);
        }
 
        .ui-dialog-inhalt {
            Polsterung: 15px 20px;
        }
 
        .ui-dialog-pt15 {
            Polsterung oben: 15px;
        }
 
        .ui-dialog-l40 {
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Textausrichtung: rechts;
        }
 
        .ui-dialog-input {
            Breite: 100 %;
            Höhe: 40px;
            Rand: 0px;
            Polsterung: 0px;
            Rand: 1px durchgezogen #d5d5d5;
            Schriftgröße: 16px;
            Farbe: #c1c1c1;
            Texteinzug: 25px;
            Gliederung: keine;
        }
 
        .ui-dialog-input-Benutzername {
            /* Benutzernamensymbol eingeben*/
            Hintergrund: URL (Bilder/4.png) keine Wiederholung 2px;
        }
 
        .ui-dialog-input-password {
            /* Symbol „Passwort eingeben“*/
            Hintergrund: URL (Bilder/3.png) keine Wiederholung 2px;
        }
 
        .ui-dialog-submit {
            Breite: 100 %;
            Höhe: 50px;
            Hintergrund: #3b7ae3;
            Rand: keiner;
            Schriftgröße: 16px;
            Farbe: #fff;
            Gliederung: keine;
            Textdekoration: keine;
            Anzeige: Block;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
        }
 
        .ui-dialog-submit:hover {
            Hintergrund: #3f81b0;
        }
 
        .ui-Maske {
            Breite: 100 %;
            Höhe: 100%;
            Hintergrund: #000;
            Position: absolut;
            oben: 0px;
            Höhe: 0px;
            Z-Index: 8000;
            Deckkraft: 0,4;
 
            /*Kompatibel mit niedrigeren IE-Versionen*/
            Filter: Alpha (Deckkraft = 40);
        }
    </Stil>
</Kopf>
 
<Text>
 
    <div Klasse="Link">
        <a href="javascript:showDialog();" >Anmelden</a>
    </div>
 
    <!-- Legen Sie eine Hintergrundmaskenebene fest, um Mausauswahlereignisse zu verhindern-->
    <div Klasse = "ui-mask" id = "mask" onselectstart = "return false" ><div>
 
    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
 
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            Anmeldekennwort<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
        </div>
 
        <div Klasse="ui-dialog-content">
 
            <div Klasse="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" value="Mobiltelefon/E-Mail/Benutzername" />
            </div>
 
            <div Klasse="ui-dialog-l40 ui-dialog-pt15">
                <input Klasse="ui-dialog-input ui-dialog-input-password" Typ="input" Wert="Passwort" />
            </div>
 
            <div Klasse="ui-dialog-l40">
                <a href="#" >Passwort vergessen</a>
            </div>
 
            <div>
                <a class="ui-dialog-submit" href="#" >Anmelden</a>
            </div>
 
            <div Klasse="ui-dialog-l40">
                <a href="#" >Jetzt registrieren</a>
            </div>
        </div>
    </div>
 
 
    <Skripttyp="text/javascript">
 
        //Deklarieren Sie die Methode zum Abrufen der Elementobjektfunktion $(id) { return document.getElementById(id); }
 
        //Deklarieren Sie die Methode zur automatischen Zentrierung des Elements (el = Element)
        Funktion autoCenter(el) {
 
            //Breite und Höhe des sichtbaren Bereichs der Webseite abrufen var bodyW = document.documentElement.clientWidth;
            var bodyH = Dokument.documentElement.clientHeight;
 
            //Tatsächliche Breite und Höhe des übergebenen Elements abrufen var elW = el.offsetWidth;
            var elH = el.offsetHeight;
 
            //Setzen Sie die linke Seite des Elements auf die Breite des sichtbaren Bereichs minus seiner eigenen Breite geteilt durch 2, und dasselbe für die obere Seite el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + "px";
 
        }
 
        //Elemente automatisch auf die gesamte Anzeigefläche erweitern function fillToBody(el) {
 
            //Setzen Sie die Breite und Höhe des aktuellen Elements auf die Breite und Höhe des sichtbaren Bereichs el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }
 
        //Setze den Anfangswert der Maus in X- und Y-Richtung auf 0
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;
 
        //Ob es gezogen werden kann, var isDraging = false;
 
        // Mausereignis 1 – berechnet die Koordinaten der Maus relativ zur oberen linken Ecke des gezogenen Elements und markiert das Element als verschiebbar $('dialogDrag').addEventListener('mousedown', function (e) {
 
            //Kompatibel mit dem Mausereignismechanismus des Internet Explorers var e = e || window.event;
 
            //Der Mausversatz entspricht der X-Koordinate beim Drücken der Maus im aktuellen Ereignis abzüglich der Position der schwebenden Anmeldeebene relativ zur linken Seite der Seite mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
 
            //Der Mausversatz entspricht der Y-Koordinate beim Drücken der Maus im aktuellen Ereignis abzüglich der Position der schwebenden Anmeldeebene relativ zum oberen Seitenrand mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
 
            //Setze das Draggable-Flag auf „true“.
            istDraging = wahr;
 
        })
 
        // Mausereignis 2 - wenn die Maus bewegt wird, prüfen, ob das Element als verschiebbar markiert ist.
        //Wenn ja, aktualisiere die Position des Elements auf die aktuelle Mausposition (abzüglich des im ersten Schritt ermittelten Offsets)
        document.onmousemove = Funktion (e) {
 
            //Kompatibel mit dem Mausereignismechanismus des Internet Explorers var e = e || window.event;
 
            //Ruf die Position der Maus auf der aktuellen Seite an (obere linke Ecke der Webseite). e.pageX und e.pageY haben unterschiedliche Werte, wenn die Maus gedrückt wird. var mouseX = e.pageX;
            var mouseY = e.pageY;
 
            //Zeichne die x- und y-Koordinaten auf, wenn die Maus bewegt wird. var moveX = 0;
            var bewegeY = 0;
 
 
            //Wenn Ziehen aktuell möglich ist if (isDraging === true) {
 
                //Die Position des gezogenen Elements entspricht der Position der Maus relativ zur Seite abzüglich der Position der Maus relativ zur oberen linken Ecke des gezogenen Elements moveX = mouseX - mouseOffsetX;
                bewegeY = MausY - MausversatzY;
 
                //Maximale Breite und Höhe der Seite ermitteln (beachten Sie den Unterschied zwischen clientWidth und offsetWidth)
                var Seitenbreite = Dokument.Dokumentelement.Clientbreite;
                var Seitenhöhe = Dokument.Dokumentelement.Clienthöhe;
 
                //Die Breite und Höhe des schwebenden Ebenenobjekts var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;
 
                //Den maximalen verschiebbaren Wert berechnen var maxX = Seitenbreite - Dialogbreite;
                var maxY = Seitenhöhe - Dialoghöhe;
 
                //Treffen Sie eine Entscheidung, um ein Ziehen aus dem zulässigen Bereich zu verhindern moveX = Math.min(maxX, Math.max(0, moveX));
                bewegeY = Math.min(maxY, Math.max(0, bewegeY));
 
                //Setze den neuen Wert des Drag-Elements $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';
 
            }
 
 
        }
 
        //Mausereignis 3 - wenn die Maus losgelassen wird, markiere das Element als unbeweglich document.onmouseup = function () {
            istDraging = falsch;
        }
 
        //Zeige das Login-Fenster Funktion showDialog() {
            $('dialogMove').style.display = 'Block';
            $('Maske').style.display = 'Block';
 
            //Das Anmeldefeld ist zentriert autoCenter($('dialogMove'));
 
            //Stellen Sie die Maskenebene so ein, dass der Anzeigebereich gefüllt wird fillToBody($('mask'))
 
 
        }
        //Das Login-Feld ausblenden Funktion hideDialog() {
            $('dialogMove').style.display = 'keine';
            $('mask').style.display = 'keine';
        }
 
        //Die Verarbeitungsfunktion beim Ändern der Fenstergröße window.onresize = function () {
 
            //Das Anmeldefeld ist zentriert autoCenter($('dialogMove'));
 
            //Wenn das Anmeldefeld angezeigt wird, führen Sie die Anzeigefunktion der Maskenebene aus, wenn ($('dialogMove').style.display === 'block') {
                fillToBody($('Maske'))
            }
 
 
        }
    </Skript>
</body>
 
</html>

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: