01 前言
滑动验证码的常见样式有很多种，下面我就使用KgCaptcha来就给大家举例说说！
02 嵌入式
这种样式最常见，也是默认样式，直接在页面上展现。
// 引入js <scriptsrc="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><divid="captchaBox"></div>
03 触发式
这种样式占用面积较小，通过hover悬浮在指定元素上展现。
// 引入js <scriptsrc="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script><script>kg.captcha({ // 绑定显示区域bind: "#captchaBox", // 向上或向下浮出，top|downfloat: "top", // 验证成功事务处理success: function (e) { console.log(e); }, // 验证失败事务处理failure: function (e) { console.log(e); }, // 点击刷新按钮时触发refresh: function (e) { console.log(e); } }); </script><divid="captchaBox"></div>
04 弹窗式
这种样式验证码默认不可见，通过点击或调用指定的方法后将以浮层的形式展现。
// 引入js <scriptsrc="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script><script>kg.captcha({ // 绑定弹窗按钮button: "#captchaButton", // 验证成功事务处理success: function (e) { // 验证成功，直接提交表单// form1.submit();console.log(e); }, // 验证失败事务处理failure: function (e) { console.log(e); }, // 点击刷新按钮时触发refresh: function (e) { console.log(e); } }); </script><aid="captchaButton"></a>
05 相关链接
官方地址：凯格行为验证码（KgCaptcha）滑动拼图验证，无感验证码，文字点选验证码
在线体验：凯格行为验证码在线体验
开发文档：凯格行为验证码-开发文档
