JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼

更新時(shí)間：2021年11月07日 16:01:10 作者：雪旭

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

效果：鼠標(biāo)在底部滑塊上按下按住不松拖動(dòng)可以移動(dòng)滑塊，上面大圖里面帶有小圖背景的滑塊也會(huì)跟隨移動(dòng)，移動(dòng)到大圖背景缺少區(qū)域即可完成驗(yàn)證。以上效果要實(shí)現(xiàn)，需要鼠標(biāo)按下（mousedown事件），鼠標(biāo)松開（mouseup事件），鼠標(biāo)移動(dòng)（mousemove事件）這幾個(gè)事件。

先制作html部分實(shí)現(xiàn)靜態(tài)效果，大圖里面可移動(dòng)的小塊背景大小與大圖一致，給小圖塊的背景添加background-position屬性來(lái)控制小圖要顯示的圖片區(qū)域

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>移動(dòng)滑塊>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
</body>
</html>

JS部分：

獲取需要的dom元素，鼠標(biāo)在底部滑塊上按下時(shí)，才能移動(dòng)，所以在這個(gè)滑塊上綁定一個(gè)鼠標(biāo)按下事件，在這個(gè)事件里通過(guò)event這個(gè)對(duì)象獲取鼠標(biāo)的坐標(biāo)點(diǎn)并減去小塊的偏移量來(lái)獲取滑塊移動(dòng)的偏差值（鼠標(biāo)的坐標(biāo)點(diǎn)減去這個(gè)偏差值才是真實(shí)移動(dòng)的距離），移動(dòng)狀態(tài)變?yōu)榭苫瑒?dòng)。

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;//是否可滑動(dòng)
let x,y;//偏移量
moveBlock.onmousedown=function(e){
    var e=e||window.event;
    x=e.clientX - block.offsetLeft;
    y=e.clientY - block.offsetTop;
    isDrop=true;
}

當(dāng)滑動(dòng)狀態(tài)為true時(shí)，用鼠標(biāo)的坐標(biāo)點(diǎn)減去這個(gè)偏差值，并對(duì)二個(gè)可移動(dòng)的滑塊重新定位。滑塊滑動(dòng)到大圖缺少區(qū)域即為驗(yàn)證成功。

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';
                //200大圖里面缺失區(qū)域距離左邊的位置
                if(Math.abs(left-200)<=3){
                   alert('驗(yàn)證成功');
                }
            }            
        }

到這里已經(jīng)初步實(shí)現(xiàn)效果了，但是滑塊會(huì)超出大圖的范圍，需要給滑塊的滑動(dòng)距離加個(gè)限定，不然它會(huì)超出大圖的范圍，

moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left= e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //范圍限定
                if(left<0){
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200大圖里面缺失區(qū)域距離左邊的位置
                if(Math.abs(left-200)<=3){
                    alert('驗(yàn)證成功');
                }
            }            
        }

鼠標(biāo)松開可移動(dòng)狀態(tài)變?yōu)閒alse,為了防止移動(dòng)過(guò)快，把事件綁定到document上

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

到這里效果已經(jīng)實(shí)現(xiàn)了，如果想要背景大圖的缺失區(qū)域是隨機(jī)的可以加個(gè)，隨機(jī)定位函數(shù)。

//隨機(jī)定位
        function randomPosition(){
            /*隨機(jī)數(shù)公式取 n-m之間的隨機(jī)數(shù)  Math.random() * (m-n)+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'
        }

全部代碼：

<!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>移動(dòng)滑塊>>></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;//是否可滑動(dòng)
        let x,y,targetleft;//偏移量,左邊定位距離
        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;
                //范圍限定
                if(left<0){
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200大圖里面缺失區(qū)域距離左邊的位置
                if(Math.abs(left-targetleft)<=5){
                    alert('驗(yàn)證成功');
                }
            }            
        }
        document.onmouseup=function(){
            isDrop=false;
        }

        //隨機(jī)定位
        function randomPosition(){
            /*隨機(jī)數(shù)公式取 n-m之間的隨機(jī)數(shù)  Math.random() * (m-n)+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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: