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"

js drag and drop table to realize content calculation

JavaScript to implement slider verification code

js drag and drop table to realize content calculation

Detailed explanation of Vue ElementUI manually uploading excel files to the server

Examples of correct use of interface and type methods in TypeScript

Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties

MySQL slow_log table cannot be modified to innodb engine detailed explanation

Mysql master/slave database synchronization configuration and common errors

MySQL 5.7.19 winx64 free installation version configuration tutorial

Detailed code for adding electron to the vue project

Review of the best web design works in 2012 [Part 1]

Solve the problem of running jupyter notebook on the server

Recommend

How to use JSZip compression in CocosCreator

Graphical explanation of the underlying principle of JavaScript scope chain

How to install docker on centos

24 Practical JavaScript Development Tips

Summary of Vue watch monitoring methods

Solution for converting to inline styles in CSS (css-inline)

Detailed introduction of Chrome developer tools-timeline

How to integrate the graphic verification code component into the Ant Design Pro login function

jQuery implements sliding tab

In-depth understanding of the seven communication methods of Vue components

How to get the size of a Linux system directory using the du command

jQuery implements article collapse and expansion functions

Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements

VMware 15.5 version of the graphic tutorial to build a yum warehouse by mounting the system CD

MySQL operations: JSON data type operations