分类导航

程序笔记发布时间：2022-07-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了H5 滑块拼图验证，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

展示效果

参考视频地址 https://www.bilibili.com/video/BV1NM4y1g7S6

H5 滑块拼图验证

逻辑概述

使用背景图片的继承父节点样式的三张图片，子节点通过使用clip-path裁切图片，通过位置偏移来达成移动效果。

主要代码

布局

<div id="captcha">
    <div id="handle">
        <span></span>
    </div>
</div>

样式

 #captcha {
     display: block;
     width: var(--width);
     height: var(--height);
     border-radius: 4px;
     BACkground-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2676921178,3792372773&fm=55&app=54&f=JPEG?w=1680&h=630);
     BACkground-size: cover;
     BACkground-position: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
     position: relative;
     box-sizing: border-box;
}


#captcha::before,
#captcha::after {
    position: absolute;
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    BACkground-image: inherit;
    BACkground-size: inherit;
    BACkground-position: inherit;
    clip-path: var(--clip-path);
    --webkit-clip-path: var(--clip-path);
}

#captcha::after {
    transform: translateX(calc(var(--clip-offsetX) * -1 + var(--moved)));
    transition: .25s all ease-in-out;
}

#captcha::before {
    BACkground-color: rgba(0, 0, 0, .5);
    BACkground-blend-mode: multiply;
}

#captcha:active #handle span,
#captcha:active::after {
    transition: none;
}

#captcha #handle {
    width: calc(var(--width) - (3px * 2));
    height: 30px;
    border-radius: 18px;
    BACkground-color: #eee;
    position: absolute;
    bottom: -50px;
    left: 0;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);
    border: 3px solid #ccc;
}

#handle span {
    display: block;
    width: var(--puzzle-width);
    height: inherit;
    border-radius: inherit;
    BACkground-color: #fff;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);
    position: absolute;
    cursor: move;
    transform: translateX(var(--moved));
    transition: .25s all ease-in-out;
}

#captcha.passed #handle,
#captcha.passed::after,
#captcha.passed::before {
    opacity: 0;
}

控制

let width = 400;        // 宽度
let height = 260;       // 高度
let puzzleWidth = 80;   // 切图宽
let puzzleHeight = 80;  // 切图高
let moved = 0;          // 移动位置
let mpe = 5;            // 允许最大误差
let offsetX = 6;        // 边距值  
let offsetY = 0;        // 边距值 
let shouldMove = false;

let clipRectX1 = randomRange(puzzleWidth + offsetX, width - puzzleWidth - offsetX);
let clipRectX2 = clipRectX1 + puzzleWidth;
let clipRectY1 = randomRange(puzzleHeight + offsetX, height - puzzleHeight - offsetY);
let clipRectY2 = clipRectY1 + puzzleHeight;

let captcha = document.querySELEctor('#captcha');
let handle = document.querySELEctor('#handle');
let button = document.querySELEctor('#handle span');

button.addEventListener("mousedown", (E) => {
    shouldMove = true;
})

window.addEventListener("mousemove", (E) => {
    if (shouldMovE) {
        const offsetLeft = handle.getBoundingClientRect().left;
        const buttonWidth = button.getBoundingClientRect().width;
        moved = e.clientX - offsetLeft - buttonWidth / 2;
        render();
    }
})

window.addEventListener("mouseup", (E) => {
    if (shouldMovE) {
        const finalOffset = e.clientX - handle.getBoundingClientRect().left - puzzleWidth / 2;
        if (Math.abs(finalOffset - clipRectX1) < mpE) captcha.classList.add('passed')
        else moved = 0;
        render();
        shouldMove = false;
    }
})

/**
 * 超出省略
 */
function clamp(num, a, b) {
    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
}

/**
 * 随机数字
 */
function randomRange(min, maX) {
    return Math.round(R_7_11845@ath.random() * (max - min)) + min
}

/**
 *  渲染
 */
function render() {
    let clipPath = `polygon( ${ClipRectX1}px ${ClipRectY1}px, ${ClipRectX2}px ${ClipRectY1}px, ${ClipRectX2}px ${ClipRectY2}px, ${ClipRectX1}px ${ClipRectY2}px )`;
    captcha.style = `--clip-offsetX:${ClipRectX1}px;--moved:${Clamp(moved, 0, width - puzzleWidth - offsetX)}px;--clip-path:${ClipPath};--width:${width}px;--height:${height}px;--puzzle-width:${puzzleWidth}px;--puzzle-height:${puzzleHeight}px`;
}

render();

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        #captcha {
            display: block;
            width: var(--width);
            height: var(--height);
            border-radius: 4px;
            BACkground-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2676921178,3792372773&fm=55&app=54&f=JPEG?w=1680&h=630);
            BACkground-size: cover;
            BACkground-position: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
            position: relative;
            box-sizing: border-box;
        }


        #captcha::before,
        #captcha::after {
            position: absolute;
            content: "";
            display: block;
            width: inherit;
            height: inherit;
            BACkground-image: inherit;
            BACkground-size: inherit;
            BACkground-position: inherit;
            clip-path: var(--clip-path);
            --webkit-clip-path: var(--clip-path);
        }

        #captcha::after {
            transform: translateX(calc(var(--clip-offsetX) * -1 + var(--moved)));
            transition: .25s all ease-in-out;
        }

        #captcha::before {
            BACkground-color: rgba(0, 0, 0, .5);
            BACkground-blend-mode: multiply;
        }

        #captcha:active #handle span,
        #captcha:active::after {
            transition: none;
        }

        #captcha #handle {
            width: calc(var(--width) - (3px * 2));
            height: 30px;
            border-radius: 18px;
            BACkground-color: #eee;
            position: absolute;
            bottom: -50px;
            left: 0;
            box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);
            border: 3px solid #ccc;
        }

        #handle span {
            display: block;
            width: var(--puzzle-width);
            height: inherit;
            border-radius: inherit;
            BACkground-color: #fff;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);
            position: absolute;
            cursor: move;
            transform: translateX(var(--moved));
            transition: .25s all ease-in-out;
        }

        #captcha.passed #handle,
        #captcha.passed::after,
        #captcha.passed::before {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="captcha">
        <div id="handle">
            <span></span>
        </div>
    </div>
    <script>
        let width = 400;        // 宽度
        let height = 260;       // 高度
        let puzzleWidth = 80;   // 切图宽
        let puzzleHeight = 80;  // 切图高
        let moved = 0;          // 移动位置
        let mpe = 5;            // 允许最大误差
        let offsetX = 6;        // 边距值  
        let offsetY = 0;        // 边距值 
        let shouldMove = false;
        
        let clipRectX1 = randomRange(puzzleWidth + offsetX, width - puzzleWidth - offsetX);
        let clipRectX2 = clipRectX1 + puzzleWidth;
        let clipRectY1 = randomRange(puzzleHeight + offsetX, height - puzzleHeight - offsetY);
        let clipRectY2 = clipRectY1 + puzzleHeight;

        let captcha = document.querySELEctor('#captcha');
        let handle = document.querySELEctor('#handle');
        let button = document.querySELEctor('#handle span');

        button.addEventListener("mousedown", (E) => {
            shouldMove = true;
        })

        window.addEventListener("mousemove", (E) => {
            if (shouldMovE) {
                const offsetLeft = handle.getBoundingClientRect().left;
                const buttonWidth = button.getBoundingClientRect().width;
                moved = e.clientX - offsetLeft - buttonWidth / 2;
                render();
            }
        })

        window.addEventListener("mouseup", (E) => {
            if (shouldMovE) {
                const finalOffset = e.clientX - handle.getBoundingClientRect().left - puzzleWidth / 2;
                if (Math.abs(finalOffset - clipRectX1) < mpE) captcha.classList.add('passed')
                else moved = 0;
                render();
                shouldMove = false;
            }
        })

        /**
         * 超出省略
         */
        function clamp(num, a, b) {
            return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
        }

        /**
         * 随机数字
         */
        function randomRange(min, maX) {
            return Math.round(R_7_11845@ath.random() * (max - min)) + min
        }

        /**
         *  渲染
         */
        function render() {
            let clipPath = `polygon( ${ClipRectX1}px ${ClipRectY1}px, ${ClipRectX2}px ${ClipRectY1}px, ${ClipRectX2}px ${ClipRectY2}px, ${ClipRectX1}px ${ClipRectY2}px )`;
            captcha.style = `--clip-offsetX:${ClipRectX1}px;--moved:${Clamp(moved, 0, width - puzzleWidth - offsetX)}px;--clip-path:${ClipPath};--width:${width}px;--height:${height}px;--puzzle-width:${puzzleWidth}px;--puzzle-height:${puzzleHeight}px`;
        }

        render();
    </script>
</body>

</html>

大佬总结

以上是大佬教程为你收集整理的H5 滑块拼图验证全部内容，希望文章能够帮你解决H5 滑块拼图验证所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：cap list load php 程序员

上一篇: gRPC趁现在还没大火，抢先了解一... 下一篇:快乐的一天从AC开始 | 20210628 ...

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07