unlock.js演示四种不同的滑动解锁

unlock.js是一款滑动结算插件，本文讲解了插件的配置参数。jQuery滑动到底部解锁表单验证是表单中常用到的一种验证来防止恶意攻击。

分类：表单代码 > 验证码难易：中级

查看演示下载资源下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

四种滑动验证码

<div class="bar1 bar"></div>
<div class="bar2 bar"></div>
<div class="bar3 bar"></div>
<div class="bar4 bar"></div>

$('.bar1').slideToUnlock();
$('.bar2').slideToUnlock({
    height: 50,
    width: 200,
});
$('.bar3').slideToUnlock({
    text: '未解锁的文字',
    succText: '解锁成功的文字'
});
$('.bar4').slideToUnlock({
    bgColor: '#fce',
    progressColor: '#f60',
    succColor: '#f00',
    textColor: '#fff',
    succTextColor: '#fff',
});

参数	描述	默认值
width	滑块的宽度	默认为容器的宽度
height	滑块的高度	默认为容器的高度
bgColor	滑块的背景颜色	#E8E8E8
progressColor	progress的颜色	#FFE97F
handleColor	滑块手柄的颜色	#fff
succColor	成功解锁后的颜色	#78D02E
text	滑块上的默认文字	'slide to unlock'
textColor	文字的颜色	#000
succText	成功解锁后显示的文字	'ok!'
succTextColor	成功解锁后显示的文字颜色	#000
succFunc	成功解锁后的回调函数	function() { alert('successfully unlock!'); }

unlock.js演示四种不同的滑动解锁【原创】

四种滑动验证码