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

搭建框架

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

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

校验区域

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

添加拖动条

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

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

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

拖动条动起来

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

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

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