支持移动端的jQuery滑块式验证码插件

查看演示立即下载

插件描述：比较好看并且支持移动端的jQuery滑块式验证码插件，h5+PC端均可

更新时间：2021-05-14 00:26:47

滑块式验证码

用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。

添加网页Html元素

1	`<div` `id="captcha"></div>`

API

通过 javascript 初始化控件

<div id="captcha"></div>
<script>
    $('#captcha').sliderCaptcha();
</script>

Options

可以根据自己需要设置宽度与高度等配置

<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	"/"	设置图片加载路径
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('init')	重新初始化控件
reset	$('#captcha').sliderCaptcha('reset')	重置控件
verify	$('#captcha').sliderCaptcha('verify')	验证结果

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：网页浅深颜色模式切换
下一个特效： jQuery四叶草天气温湿度小卡片