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“

Zusammenfassung gängiger Befehle für den Einstieg in die MySQL-Datenbankgrundlagen

JavaScript zum Implementieren des Slider-Verifizierungscodes

Zusammenfassung gängiger Befehle für den Einstieg in die MySQL-Datenbankgrundlagen

Detaillierte Erklärung der grundlegenden Typen von TypeScript

Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden

Ein ausführliches Tutorial zur Installation von Jenkins auf Docker für Anfänger

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux

Implementierungsschritte zum Installieren einer Java-Umgebung in Docker

Einige Vorschläge zur Gewährleistung der MySQL-Datensicherheit

CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 8.0 unter Windows 10

Artikel empfehlen

Vue implementiert Beispielcode zum Ziehen von Dateien vom Desktop auf eine Webseite (kann Bilder/Audio/Video anzeigen)

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Einführung in semantische HTML-Tags

Detaillierte Erläuterung der MySQL-Protokoll- und Sicherungs- und Wiederherstellungsprobleme

Umfassendes Verständnis des html.css-Überlaufs

CSS implementiert horizontal scrollende Navigationsleiste auf Mobilgeräten (gilt auch für PC-Geräte)

Detaillierte Erläuterung des Aufbaus und der Schnittstellenverwaltung des Docker Private Warehouse

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

Vuex implementiert einen einfachen Einkaufswagen

Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele

So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile

Implementierung eines statischen Website-Layouts im Docker-Container

Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Ubuntu16.04 erstellt eine php5.6-Webserverumgebung