直播平台软件开发，前端实现登录拼图验证

直播平台软件开发，前端实现登录拼图验证

搭建框架

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

 

// 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> 

​

校验区域

 

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

 

 添加拖动条

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

 

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

 

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

 

    拖动条动起来

这一步我们需要让我们的拖动盒子动起来，让他可以在拖动区域内随意的左右拖动。

 

    // 获取元素实例
    const drag = document.querySelector('.drag-child')
 
    // 声明鼠标按下事件
    const dragMouseDown = event => {
        // 添加鼠标移动事件
        document.addEventListener('mousemove', dragMouseMove)
    }
    // 监听鼠标移动事件
    const dragMouseMove = event => {
        // 获取当前 x 轴坐标
        const { offsetX } = event
        if(offsetX < 0 || offsetX > 350){
            return
        }
        // 修改可移动盒子的 x 轴坐标
        drag.style.transform = `translateX(${offsetX}px)`
    }
    // 结束鼠标监听事件
    const dragMouseUP = event => {
        // 移除鼠标移动事件
        document.removeEventListener('mousemove', dragMouseMove)
    }
 
    // 添加鼠标按下事件
    document.addEventListener('mousedown', dragMouseDown)
    // 添加鼠标弹起事件
    document.addEventListener('mouseup', dragMouseUP) 

 

以上就是直播平台软件开发，前端实现登录拼图验证， 更多内容欢迎关注之后的文章