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“

Wie werden Vue-Komponenten analysiert und gerendert?

Artikel

Zwei Möglichkeiten, Vue-Benutzer dazu zu bringen, sich über einen längeren Zeitraum ohne Bedienung von der Anmeldeseite abzumelden

Artikel

JavaScript zum Implementieren des Slider-Verifizierungscodes

Wie werden Vue-Komponenten analysiert und gerendert?

Zwei Möglichkeiten, Vue-Benutzer dazu zu bringen, sich über einen längeren Zeitraum ohne Bedienung von der Anmeldeseite abzumelden

HTML-Tutorial: Ungeordnete Liste

Diagramm der Installationszusammenfassung für MySQL 8.0.11

Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers

Lösung für das Problem der Rückgabe von 0x1, wenn der Windows 2008-Aufgabenplan ein Bat-Skript nicht ausführen kann

Designideen für MySQL-Backup und -Wiederherstellung

Detaillierte Erklärung dieser Zeigerfunktion in JS

Zehn Erfahrungen im Webdesign im Jahr 2008

So implementieren Sie Dual-Machine-Master und Backup mit Nginx+Keepalived

Artikel empfehlen

Ubuntu 18.04 fordert bei der Installation von MySQL nicht zur Eingabe eines Kennworts auf und wie man das Problem löst

Vergleichen von Dokumentspeicherorten

Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

Müssen die Texte der Website noch gestaltet werden?

Einführung in die Vue-Schaltflächenberechtigungssteuerung

37 Tipps für ein gutes User Interface Design (mit Bildern)

So passen Sie die Bash-Eingabeaufforderung in Linux an

Front-End-KI-Schnitttipps (Erfahrung)

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

MySql-Lerntag 03: Verbindungs- und Abfragedetails zwischen Datentabellen

Eine Untersuchung des JS-Operators im Problem

Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist

Lernen Sie, wie Sie Uniapps und Miniprogramme (Bilder und Text) untervergeben

So verwenden Sie CSS, um je nach Unterelementen unterschiedliche Stile zu schreiben