用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。
使用方法：
依赖插件：jQuery、bootstrap、font-awesome
将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。
<linkhref="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><linkhref="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css"><linkhref="./src/slidercaptcha.css">
将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><scriptsrc="./src/longbow.slidercaptcha.js"></script>
添加网页Html元素
<divid="captcha"></div>
通过 javascript 初始化控件
<divid="captcha"></div><script>$('#captcha').sliderCaptcha();</script>
你还可以根据自己需要设置宽度与高度等配置
<script>$('#captcha').sliderCaptcha({width:280,height:150,sliderL:42,sliderR:9,offset:5,loadingText:'正在加载中…',failedText:'再试一次',barText:'向右滑动填充拼图',repeatIcon:'fafa-redo'setSrc:function(){//设置图片加载路径},onSuccess:function(){//验证通过时回调此函数},onFail:function(){//验证失败时回调此函数},onRefresh:function(){//点击重新加载图标时回调此函数}});</script>详细参数：名称类型默认值说明widthinteger280背景图片宽度heightinteger150背景图标高度sliderLinteger42拼图宽度sliderRinteger9拼图突出半径offsetinteger5验证容错偏差值 默认5个像素偏差即认为验证通过loadingTextstring"正在加载中…"图片加载时显示的文本信息failedTextstring"再试一次"验证失败时显示的文本信息barTextinteger"向右滑动填充拼图"拖动滑块准备拖动时显示的文本信息repeatIconstring"fa fa-redo"重新加载图标 需引用 font-awesomesetSrcfunction"https://picsum.photos/?image=random"设置图片加载路径onSuccessfunctionnull验证通过时回调此函数onFailfunctionnull验证失败时回调此函数onRefreshfunctionnull点击重新加载图标时回调此函数localImagesfunctionfunction () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; }图床图片加载失败时调用此方法返回本地图片路径其他方法：<divid="captcha"></div><script>$('#captcha').sliderCaptcha();$('#captcha').sliderCaptcha('reset');</script>
参数：
MethodExampleDescriptionreset$('#captcha').sliderCaptcha('reset')重置控件
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/5658.html；
