验证码的花式玩法

01 前言

滑动验证码的常见样式有很多种，下面我就使用来就给大家举例说说！

02 嵌入式

这种样式最常见，也是默认样式，直接在页面上展现。

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
kg.captcha({
    // 绑定元素，验证框显示区域
    bind: "#captchaBox",

    // 验证成功事务处理
    success: function(e) {
        console.log(e); 
    },

    // 验证失败事务处理
    failure: function(e) {
        console.log(e); 
    },

    // 点击刷新按钮时触发
    refresh: function(e) {
        console.log(e);
    }
});
</script> 

03 触发式

这种样式占用面积较小，通过hover悬浮在指定元素上展现。

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
kg.captcha({
    // 绑定显示区域
    bind: "#captchaBox",

    // 向上或向下浮出，top|down
    float: "top",

    // 验证成功事务处理
    success: function (e) {
        console.log(e);
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
</script>

<div id="captchaBox"></div>

04 弹窗式

这种样式验证码默认不可见，通过点击或调用指定的方法后将以浮层的形式展现。

相关链接

在线体验：
https://www.kgcaptcha.com/demo/