JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)

In diesem Artikelbeispiel wird der spezifische Code der coolen Front-End-Seiten-Verschiebungsüberprüfung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Teilen Sie die coole Frontend-Seiten-Verifizierung per Schieberegler

Ich habe schon einmal eines gepostet, und hier ist noch eines, aber die Spezialeffekte sind anders

Oder direkt auf dem Code:

<%@ Seite contentType="text/html;charset=UTF-8" Sprache="java" %>
<html>
<Kopf>
    <title>Titel</title>
    <Stil>
        /* Foliensteuerungscontainer, grauer Hintergrund*/
        #Container ziehen {
            Position: relativ;
            Anzeige: Inline-Block;
            Hintergrund: #e8e8e8;
            Breite: 300px;
            Höhe: 33px;
            Rand: 2px durchgezogen #e8e8e8;
        }
        /* Linker Teil des Sliders, grüner Hintergrund*/
        #ziehenBg {
            Position: absolut;
            Hintergrundfarbe: #7ac23c;
            Breite: 0px;
            Höhe: 100%;
        }
        /* Containertext zur Folienüberprüfung*/
        #Text ziehen {
            Position: absolut;
            Breite: 100 %;
            Höhe: 100%;
            /* Text horizontal zentrieren */
            Textausrichtung: zentriert;
            /* Der Text wird vertikal zentriert. Sie können hier keine Prozentwerte verwenden, da Prozentwerte relativ zur ursprünglichen Zeilenhöhe sind, nicht zur Div-Höhe*/
            Zeilenhöhe: 33px;
            /* Text kann nicht ausgewählt werden */
            Benutzerauswahl: keine;
            -webkit-Benutzerauswahl: keine;
        }
        /* Schieberegler*/
        #dragHandler {
            Position: absolut;
            Breite: 40px;
            Höhe: 100%;
            Cursor: bewegen;
        }
        /* Ursprünglicher Hintergrund des Sliders */
        .dragHandlerBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
        }
        /* Der Slider-Hintergrund hat ein √, wenn die Überprüfung erfolgreich war*/
        .dragHandlerOkBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
        }
    </Stil>
</Kopf>
<Text>
        <div id="dragContainer"><!-- Ursprünglicher Hintergrund des Containers -->
            <div id="dragBg"></div><!-- Grüner Hintergrund-->
            <div id="dragText"></div><!-- Verschiebbarer Containertext-->
            <div id="dragHandler" class="dragHandlerBg"></div>
        </div> <!-- Anfänglicher Hintergrund des Sliders -->
</body>

<Skript>
    //Laden (das Ereignis wird ausgelöst, nachdem die Seite geladen wurde)
    fenster.onload = funktion() {
        //Schiebesteuerungscontainer abrufen, grauer Hintergrund var dragContainer = document.getElementById("dragContainer");
        //Linken Teil des Schiebereglers abrufen, grüner Hintergrund var dragBg = document.getElementById("dragBg");
        //Text des gleitenden Überprüfungscontainers abrufen var dragText = document.getElementById("dragText");
        //Den Schieberegler abrufen var dragHandler = document.getElementById("dragHandler");

        //Der maximale Versatz des Schiebereglers = die Länge des gleitenden Überprüfungscontainertexts - die Länge des Schiebereglers var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
        //Ob die Überprüfung erfolgreich war var isVertifySucc = false;

        initDrag();

        Funktion initDrag() {
            //Schreiben Sie „Ziehen Sie den Schieberegler zum Überprüfen“ in den Text des Schiebeüberprüfungscontainers.
            dragText.textContent = „Ziehen Sie den Schieberegler zum Überprüfen“;
            //Mauszeiger nach unten-Listener zum Schieberegler hinzufügen dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
        }

        //Wähle die Slider-Funktion onDragHandlerMouseDown() {
            //Überwachung der Mausbewegung document.addEventListener("mousemove", onDragHandlerMouseMove);
            //Listener zum Loslassen der Maus document.addEventListener("mouseup", onDragHandlerMouseUp);
        }

        //Schieberegler-Bewegungsfunktion onDragHandlerMouseMove() {
            /*
            Das HTML-Element hat kein Breitenattribut, nur clientWidth
            offsetX ist relativ zum aktuellen Element, clientX und pageX sind relativ zum übergeordneten Element*/
            //Schiebereglerbewegung var left = event.clientX - dragHandler.clientWidth / 2;
            //
            wenn(links < 0) {
                links = 0;
                //Wenn die Schiebereglerbewegung > dem maximalen Versatz des Schiebereglers ist, rufen Sie die Funktion zur Überprüfung des Erfolgs auf} else if(left > maxHandlerOffset) {
                links = maxHandlerOffset;
                verifiziereSucc();
            }
            //Schiebereglerbewegung dragHandler.style.left = left + "px";
            //Die Länge des grünen Hintergrunds dragBg.style.width = dragHandler.style.left;
        }

        //Lösen Sie die Schiebereglerfunktion aus function onDragHandlerMouseUp() {
            //Abhören der Mausbewegung entfernen document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //Mausfreigabe-Listener entfernen document.removeEventListener("mouseup", onDragHandlerMouseUp);
            //Sliderbewegung initialisieren dragHandler.style.left = 0;
            //Grünen Hintergrund initialisieren dragBg.style.width = 0;
        }

        //Verifizierung erfolgreich Funktion verifySucc() {
            //Erfolgreiche Markierung, kann nicht erneut gebunden werden. isVertifySucc = false;
            //Ändern Sie den Text des Containers in die weiße Schriftart „Verifizierung bestanden“. dragText.textContent = „Verifizierung bestanden“;
            dragText.style.color = "weiß";
            //Überprüfen Sie den Slider-Hintergrund dragHandler.setAttribute("class", "dragHandlerOkBg");
            //Den Mouse-Down-Listener entfernen dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
            //Abhören der Mausbewegung entfernen document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //Mausfreigabe-Listener entfernen document.removeEventListener("mouseup", onDragHandlerMouseUp);
            // Nachdem die Übereinstimmung erfolgreich war, schreiben Sie die Seite, zu der Sie springen möchten //window.location.href="success page.html" rel="external nofollow";
        };
    }
</Skript>
</html>

Die Wirkung ist wie folgt

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:

Das Problem und die Lösung bei der Verwendung des Vue-Scroller-Seiteneingabefelds, das kein Gleiten auslöst
Vue implementiert Links- und Rechts-Links-Sliding-Seiten basierend auf Better-Scroll
Vue implementiert den Seitenwechsel-Schiebeeffekt
So verwenden Sie Ihre Finger zum Gleiten zwischen Vue-Routingseiten
Implementierung des Links- und Rechtsschiebeeffekts beim Seitenwechsel basierend auf Vue
JavaScript + HTML zur Implementierung der Sliding-Verifizierung für Front-End-Seiten
JavaScript ermittelt die Position der Bildlaufleiste und verschiebt die Seite zum Ankerpunkt
js, um ein Gleiten zum unteren Seitenende zu erreichen und automatisch weitere Funktionen zu laden
js/jquery-Steuerseite dynamisches Laden von Daten gleitende Bildlaufleiste automatische Ladeereignismethode
Vue/js realisiert den Effekt des automatischen Seiten-Hochschiebens

<<: Vergleich der Effizienz der Dateneinfügung in MySQL

>>: So setzen Sie Ihr Linux-Passwort zurück, wenn Sie es verloren haben