JavaScript zum Implementieren des Slider-Verifizierungscodes

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des Slider-Verifizierungscodes zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung: Drücke und halte die Maus auf den unteren Slider und ziehe ihn, um den Slider zu verschieben. Der Slider mit dem kleinen Bildhintergrund im großen Bild darüber wird ebenfalls verschoben. Die Prüfung ist abgeschlossen, wenn er in den Bereich verschoben wird, in dem der große Bildhintergrund fehlt. Um die oben genannten Effekte zu erzielen, ist das Drücken der Maus (Mousedown-Ereignis), das Loslassen der Maus (Mouseup-Ereignis) und das Bewegen der Maus (Mousemove-Ereignis) erforderlich.

Erstellen Sie zunächst den HTML-Teil, um den statischen Effekt zu erzielen. Die Größe des beweglichen kleinen Hintergrundblocks im großen Bild entspricht der des großen Bilds. Fügen Sie dem Hintergrund des kleinen Bildblocks das Attribut „background-position“ hinzu, um den Bildbereich zu steuern, der im kleinen Bild angezeigt werden soll.

HTML:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Hintergrund: #34495e;
        }
        .wickeln{
            Breite: 600px;
            Rand: 100px automatisch;
        }
        .Banner{
            Breite: 600px;
            Höhe: 400px;
            Hintergrund: URL (Bild/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            Hintergrundgröße: 600px 400px;
            Position: relativ;
        }
        .leere-Box{
            Position: absolut;
            oben: 100px;
            links: 200px;            
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: #fff;
        }
        .Block{
            Position: absolut;
            oben: 100px;
            links: 0;            
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: URL (Bild/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            Hintergrundgröße: 600px 400px;
            Hintergrundposition: -200px -100px;
            Rand: 1px durchgehend rot;
        }
        .bewegen{
            Position: relativ;
        }
        .verschiebe p{
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Schriftgröße: 16px;
            Farbe: #666;
            Hintergrund: #eee;
            Textausrichtung: zentriert;
        }
        .Verschiebeblock{
            Position: absolut;
            links: 0;
            oben: 0;
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: #1abc9c;
            Cursor: Zeiger;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="wrap">
        <div Klasse="Banner">
            <div Klasse = "blank-box"></div>
            <div Klasse="Block"></div>
        </div>
        <div Klasse="bewegen">
            <p>Bewegen Sie den Schieberegler>>></p>
            <div Klasse="Block verschieben"></div>
        </div>
    </div>  
</body>
</html>

JS-Teil:

Holen Sie sich das erforderliche DOM-Element. Die Maus kann sich nur bewegen, wenn sie auf den unteren Schieberegler gedrückt wird. Binden Sie daher ein Mausdruckereignis an diesen Schieberegler. Holen Sie sich in diesem Ereignis den Mauskoordinatenpunkt über das Ereignisobjekt und subtrahieren Sie den Versatz des kleinen Blocks, um den Abweichungswert der Schiebereglerbewegung zu erhalten (der Mauskoordinatenpunkt abzüglich des Abweichungswerts ist die tatsächliche Bewegungsdistanz), und der Bewegungszustand wird verschiebbar.

let banner = document.querySelector('.banner');
: Lassen Sie blankBox = document.querySelector('.blank-box');
: Lassen Sie den Block = document.querySelector('.block');

: Lassen Sie moveBlock = document.querySelector('.move-block');
let isDrop=false;//Ist es verschiebbar? let x,y;//Offset moveBlock.onmousedown=function(e){
    var e=e||Fenster.Ereignis;
    x=e.clientX - block.linksversatz;
    y=e.clientY - block.offsetTop;
    istDrop=wahr;
}

Wenn der Schiebezustand wahr ist, wird der Abweichungswert von den Mauskoordinaten abgezogen und die beiden beweglichen Schieberegler werden neu positioniert. Schieben Sie den Schieberegler auf den fehlenden Bereich des großen Bildes, um die erfolgreiche Überprüfung anzuzeigen.

Block verschieben.onmousemove=Funktion(e){
            wenn(istDrop){
                var e=e||Fenster.Ereignis;
                lass links = e.clientX-x;
                block.stil.links=links+'px';
                Block verschieben.Stil.links=links+'px';
                //Die Position des fehlenden Bereichs im 200-Pixel-Bild von links, wenn (Math.abs(left-200)<=3){
                   alert('Überprüfung erfolgreich');
                }
            }            
        }

An diesem Punkt wurde der Effekt zunächst erreicht, aber der Schieberegler überschreitet den Bereich des großen Bildes. Es ist notwendig, der Gleitdistanz des Schiebereglers eine Grenze hinzuzufügen, da er sonst den Bereich des großen Bildes überschreitet.

Block verschieben.onmousemove=Funktion(e){
            wenn(istDrop){
                var e=e||Fenster.Ereignis;
                lass links = e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //Bereichsgrenze if (left < 0) {
                    links=0
                }
                wenn(links>maxX){
                    links=maxX
                }
                block.stil.links=links+'px';
                Block verschieben.Stil.links=links+'px';
                //Die Position des fehlenden Bereichs im 200-Pixel-Bild von links, wenn (Math.abs(left-200)<=3){
                    alert('Überprüfung erfolgreich');
                }
            }            
        }

Wenn die Maus losgelassen wird, ändert sich der Bewegungszustand auf „false“. Um zu schnelle Bewegungen zu verhindern, binden Sie das Ereignis an das Dokument.

Dokument.onmouseup=Funktion(){
            istDrop=falsch;
        }

Der Effekt wurde hier erreicht. Wenn Sie möchten, dass der fehlende Bereich des Hintergrundbilds zufällig ist, können Sie eine zufällige Positionierungsfunktion hinzufügen.

//Zufällige Positionierungsfunktion randomPosition(){
            /*Die Formel für Zufallszahlen nimmt Zufallszahlen zwischen nmMath.random() * (mn)+n*/
            lass ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            lass ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);

            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Hintergrund: #34495e;
        }
        .wickeln{
            Breite: 600px;
            Rand: 100px automatisch;
        }
        .Banner{
            Breite: 600px;
            Höhe: 400px;
            Hintergrund: URL (Bild/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            Hintergrundgröße: 600px 400px;
            Position: relativ;
        }
        .leere-Box{
            Position: absolut;
            oben: 100px;
            links: 200px;            
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: #fff;
        }
        .Block{
            Position: absolut;
            oben: 100px;
            links: 0;            
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: URL (Bild/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            Hintergrundgröße: 600px 400px;
            Hintergrundposition: -200px -100px;
            Rand: 1px durchgehend rot;
        }
        .bewegen{
            Position: relativ;
        }
        .verschiebe p{
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Schriftgröße: 16px;
            Farbe: #666;
            Hintergrund: #eee;
            Textausrichtung: zentriert;
        }
        .Verschiebeblock{
            Position: absolut;
            links: 0;
            oben: 0;
            Breite: 50px;
            Höhe: 50px;
            Hintergrund: #1abc9c;
            Cursor: Zeiger;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="wrap">
        <div Klasse="Banner">
            <div Klasse = "blank-box"></div>
            <div Klasse="Block"></div>
        </div>
        <div Klasse="bewegen">
            <p>Bewegen Sie den Schieberegler>>></p>
            <div Klasse="Verschiebeblock"></div>
        </div>
    </div>  
    <Skript>
        let banner = document.querySelector('.banner');
        : Lassen Sie blankBox = document.querySelector('.blank-box');
        : Lassen Sie den Block = document.querySelector('.block');

        : Lassen Sie moveBlock = document.querySelector('.move-block');
        let isDrop=false; //Ist es verschiebbar? let x,y,targetleft; //Offset, linker Positionierungsabstand moveBlock.onmousedown=function(e){
            var e=e||Fenster.Ereignis;
            x=e.clientX - block.linksversatz;
            y=e.clientY - block.offsetTop;
            istDrop=wahr;
        }

        Block verschieben.onmousemove=Funktion(e){
            wenn(istDrop){
                var e=e||Fenster.Ereignis;
                lass links = e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //Bereichsgrenze if (left < 0) {
                    links=0
                }
                wenn(links>maxX){
                    links=maxX
                }
                block.stil.links=links+'px';
                Block verschieben.Stil.links=links+'px';
                //Die Position des fehlenden Bereichs von links im 200-Pixel-Bild if (Math.abs (left-targetleft) <= 5) {
                    alert('Überprüfung erfolgreich');
                }
            }            
        }
        Dokument.onmouseup=Funktion(){
            istDrop=falsch;
        }

        //Zufällige Positionierungsfunktion randomPosition(){
            /*Die Formel für Zufallszahlen nimmt Zufallszahlen zwischen nmMath.random() * (mn)+n*/
            lass ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            lass ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);


            Ziellinks=ranX;
            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }
        zufälligePosition()
    </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:

JS implementiert Drag-Slider-Verifizierung
JavaScript Slider Validierungsfall
JavaScript zur Implementierung der Login-Schiebereglerüberprüfung
JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)
js Canvas realisiert Slider-Verifizierung
js implementiert einen Schieberegler zur Überprüfung der Anmeldung
Codebeispiel für die Implementierung eines Drag-Verifizierungs-Schiebereglers mit nativer JS-Kapselung
Implementierung von JS-Reverse-Engineering der iQiyi-Slider-Verschlüsselung

<<: So verwenden Sie Zen-Codierung in Dreamweaver

>>: Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Artikel

Was ist WML?

Artikel

JavaScript zum Implementieren des Slider-Verifizierungscodes

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

JS implementiert Anforderungsdispatcher

So öffnen Sie eine Seite in einem Iframe

Detaillierte Erklärung des gesamten Prozesses und der Schritte zur Installation von Clion auf Ubuntu16.04

So entfernen Sie MySQL aus Ubuntu und installieren es neu

Echarts-Tutorial zur Implementierung von Baumdiagrammen

Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux

Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Was ist WML?

Artikel empfehlen

Linux-Betrieb und -Wartung – Tutorial zur grundlegenden Datenträgerverwaltung

Handtrack.js-Bibliothek zur Echtzeitüberwachung von Handbewegungen (empfohlen)

HTML-Head-Tag-Metadaten zum Erreichen einer Aktualisierungsumleitung

So stellen Sie ein Vue-Projekt unter Nginx bereit

Eine kurze Diskussion über die integrierten Traversierungsmethoden von JS-Arrays und ihre Unterschiede

Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL

React+Koa-Beispiel zur Implementierung des Datei-Uploads

So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

JavaScript zur Implementierung des Anmeldeformulars

Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten

Detaillierte Erklärung, warum MySQL nicht mit UNION zwei Abfragen verbinden kann

Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung