JavaScript to implement slider verification code

This article shares the specific code of JavaScript to implement the slider verification code for your reference. The specific content is as follows

Effect: Press and hold the mouse on the bottom slider and drag it to move the slider. The slider with the small image background in the large image above will also move with it. The verification is completed when it is moved to the area where the large image background is missing. To achieve the above effects, the mouse is pressed (mousedown event), the mouse is released (mouseup event), and the mouse moves (mousemove event) are required.

First, create the HTML part to achieve the static effect. The size of the movable small background block in the large image is the same as the large image. Add the background-position attribute to the background of the small image block to control the image area to be displayed in the small image.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #34495e;
        }
        .wrap{
            width: 600px;
            margin: 100px auto;
        }
        .banner{
            width: 600px;
            height: 400px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size: 600px 400px;
            position: relative;
        }
        .blank-box{
            position: absolute;
            top: 100px;
            left: 200px;            
            width: 50px;
            height: 50px;
            background: #fff;
        }
        .block{
            position: absolute;
            top: 100px;
            left: 0;            
            width: 50px;
            height: 50px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size:600px 400px;
            background-position:-200px -100px;
            border: 1px solid red;
        }
        .move{
            position: relative;
        }
        .move p{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #666;
            background: #eee;
            text-align: center;
        }
        .move-block{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background:#1abc9c;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>Move the slider>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
</body>
</html>

JS part:

Get the required DOM element. The mouse can only move when it is pressed on the bottom slider, so bind a mouse press event to this slider. In this event, get the mouse coordinate point through the event object and subtract the offset of the small block to get the deviation value of the slider movement (the mouse coordinate point minus the deviation value is the actual moving distance), and the moving state becomes slidable.

let banner = document.querySelector('.banner');
let blankBox = document.querySelector('.blank-box');
let block = document.querySelector('.block');

let moveBlock = document.querySelector('.move-block');
let isDrop=false;//Is it slidable? let x,y;//Offset moveBlock.onmousedown=function(e){
    var e=e||window.event;
    x=e.clientX - block.offsetLeft;
    y=e.clientY - block.offsetTop;
    isDrop=true;
}

When the sliding state is true, the deviation value is subtracted from the mouse coordinates and the two movable sliders are repositioned. Slide the slider to the missing area of the large image to indicate successful verification.

moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left = e.clientX-x;
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //The position of the missing area in the 200-pixel image from the left if (Math.abs(left-200)<=3){
                   alert('Verification successful');
                }
            }            
        }

At this point, the effect has been initially achieved, but the slider will exceed the range of the large image. It is necessary to add a limit to the sliding distance of the slider, otherwise it will exceed the range of the large image.

moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left = e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //Range limit if (left < 0) {
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //The position of the missing area in the 200-pixel image from the left if (Math.abs(left-200)<=3){
                    alert('Verification successful');
                }
            }            
        }

When the mouse is released, the movable state changes to false. To prevent moving too fast, bind the event to the document.

document.onmouseup=function(){
            isDrop=false;
        }

The effect has been achieved here. If you want the missing area of the background image to be random, you can add a random positioning function.

//Random positioning function randomPosition(){
            /*Random number formula takes random numbers between nmMath.random() * (mn)+n*/
            let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            let 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'
        }

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #34495e;
        }
        .wrap{
            width: 600px;
            margin: 100px auto;
        }
        .banner{
            width: 600px;
            height: 400px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size: 600px 400px;
            position: relative;
        }
        .blank-box{
            position: absolute;
            top: 100px;
            left: 200px;            
            width: 50px;
            height: 50px;
            background: #fff;
        }
        .block{
            position: absolute;
            top: 100px;
            left: 0;            
            width: 50px;
            height: 50px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size:600px 400px;
            background-position:-200px -100px;
            border: 1px solid red;
        }
        .move{
            position: relative;
        }
        .move p{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #666;
            background: #eee;
            text-align: center;
        }
        .move-block{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background:#1abc9c;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>Move the slider>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
    <script>
        let banner = document.querySelector('.banner');
        let blankBox = document.querySelector('.blank-box');
        let block = document.querySelector('.block');

        let moveBlock = document.querySelector('.move-block');
        let isDrop=false; //Is it slidable? let x,y,targetleft; //Offset, left positioning distance moveBlock.onmousedown=function(e){
            var e=e||window.event;
            x=e.clientX - block.offsetLeft;
            y=e.clientY - block.offsetTop;
            isDrop=true;
        }

        moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left = e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //Range limit if (left < 0) {
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //The position of the missing area from the left in the 200-pixel image if (Math.abs (left-targetleft) <= 5) {
                    alert('Verification successful');
                }
            }            
        }
        document.onmouseup=function(){
            isDrop=false;
        }

        //Random positioning function randomPosition(){
            /*Random number formula takes random numbers between nmMath.random() * (mn)+n*/
            let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);


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

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }
        randomPosition()
    </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements drag slider verification
JavaScript Slider Validation Case
JavaScript to implement login slider verification
JavaScript implements the drag slider puzzle verification function (html5, canvas)
js canvas realizes slider verification
js implements sliding slider to verify login
Native JS encapsulation drag verification slider implementation code example
Implementation of JS reverse engineering of iQiyi slider encryption

<<: How to use Zen coding in Dreamweaver

>>: Faint: "Use web2.0 to create standard-compliant pages"