代码拉取完成,页面将自动刷新
同步操作将从 LongbowEnterprise/SliderCaptcha 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
用户拖动滑块完成时完成校验,支持PC端及移动端。并可以在后台保存用户校验过程的时间,精度,滑动轨迹等信息。
在线演示:http://longbowenterprise.gitee.io/slidercaptcha/
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css">
<link href="./src/slidercaptcha.css">
将引入样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./src/longbow.slidercaptcha.js"></script>
将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。
添加网页Html元素
<div id="captcha"></div>
<div id="captcha"></div>
<script>
$('#captcha').sliderCaptcha();
</script>
可以根据自己需要设置宽度与高度等配置
<div id="captcha"></div>
<script>
$('#captcha').sliderCaptcha({
width: 280,
height: 150,
sliderL: 42,
sliderR: 9,
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-redo'
setSrc: function () {
},
onSuccess: function () {
},
onFail: function () {
},
onRefresh: function () {
}
});
</script>
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | integer | 280 | 背景图片宽度 |
height | integer | 150 | 背景图标高度 |
sliderL | integer | 42 | 拼图宽度 |
sliderR | integer | 9 | 拼图突出半径 |
loadingText | string | "正在加载中..." | 图片加载时显示的文本信息 |
failedText | string | "再试一次" | 验证失败时显示的文本信息 |
barText | integer | "向右滑动填充拼图" | 拖动滑块准备拖动时显示的文本信息 |
repeatIcon | string | "fa fa-redo" | 重新加载图标 需引用 font-awesome |
setSrc | function | "https://picsum.photos/{width}/{height}/?image=random" | 设置图片加载路径 |
onSuccess | function | null | 验证通过时回调此函数 |
onFail | function | null | 验证失败时回调此函数 |
onRefresh | function | null | 点击重新加载图标时回调此函数 |
<div id="captcha"></div>
<script>
$('#captcha').sliderCaptcha();
$('#captcha').sliderCaptcha('reset');
</script>
Method | Example | Description |
---|---|---|
init | $('#captcha').sliderCaptcha('reset') | 重新初始化控件 |
reset | $('#captcha').sliderCaptcha('reset') | 重置控件 |
verify | $('#captcha').sliderCaptcha('verify') | 验证结果 |
无
请前往 Issue 页面添加问题
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。