前端登录拼图验证，JS实现滑动拼图验证

前端实现登录拼图验证

---

---

前言

不知各位朋友现在在web端进行登录的时候有没有注意一个变化，以前登录的时候是直接账号密码通过就可以直接登录，再后来图形验证码，数字结果运算验证，到现在的拼图验证。这一系列的转变都是为了防止机器操作，但对于我们来说，有亿点麻烦，但也没办法呀。

今天我们也一起来做一个制造亿点麻烦的人，实现一个拼图验证。

---

一、实现原理

这个实现原理并不复杂，我们只需要一张图作为我们的拼接素材，我们再单独弄一个盒子，然后移动它，到我们的指定位置，到达指定范围内即验证通过，反之验证未通过。

既然原理我们知道了，那我们就开干吧。

二、实现前端登录拼图验证

本篇文章以 css 为主， javascript为辅实现。

1.搭建框架

我们要实现这个功能，我们需要先搭建出来一个框架。

// css

<style>
    .check{
   
            width: 400px;
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
        }
</style>

// html

<div class="check"></div>

我们画出来后，它就长下面图这样。

2.添加被校验区域及校验区域

我们需要添加一个被校验的区域及校验区域，用来做我们的校验，像下图这两个东西。

这里我们使用伪类来实现这两个区域。

校验区域

 .check::before{
   
            content: '';
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #fff;
            position: absolute;
            top: 100px;
            left: 280px;
    }

这样一个校验区域就做好了。

被校验区域

这里我们需要使用到 background-position 根据我们的校验区域大小进行切出我们的被校验区域。

background-image 和 background-repeat 我们直接继承，background-position 设置为校验区域的坐标位置（也就是距离top和left的距离），我们将 background-size 图片大小设为原盒子的大小。这样我们就得到了校验区域的那一片区域，也就是我们的被校验区域了。

  .check-child{
   
            content: '';
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            background-image: inherit;
            background-repeat: inherit;
            background-size: 400px 300px;
            background-position: -280px -100px;
            position: absolute;
            top: 100px;
            left: 10px;
    }
    
    // html
    
    <!-- 被校验区域 -->
    <div class="check-child"></div>

3.添加拖动条

这里我们两个区域都添加完了，我们需要添加一个拖动条。

我们先添加一个拖动区域。

    // css
    .drag{
   
            width: 400px;
            height: 50px;
            background-color: #e3e3e3;
            margin-top: 10px;
            position: relative;
    }
    
    // html
    <div class="drag"></div>

现在拖动区域有了，我们需要在拖动区域内添加一个可拖动的盒子，及操作说明，不然看起来交互效果不友好。

3.1添加可拖动的盒子及交互说明

我们添加一个可以拖动的盒子。

    // css
    
    .drag-child{
   
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    // html
    
    <!-- 可拖动的盒子 -->
    <div class="drag-child"></div>

为了我们友好的交互，我们在拖动区域内给他添加操作说明。

    // css
    
    .drag-tips{
   
        display: flex;
        align-items: center;
        justify-content: end;
        width: 95%;
        height: 100%;
        margin: 0 auto;
        font-size: 12px;
        color: #8a8a8a;
    }
    
    // html
    
    <!-- 可拖动的盒子 -->
    &l