unlock.js特点:

unlock.js是一款jquery滑动解锁插件。目前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式。用户需要滑动指定的滑块到指定位置,才能通过验证。unlock.js可以实现这种滑动解锁功能。 


unlock.js特点:

  • 滑动解锁。
  • 尺寸、颜色、字体大小等都可以个性化定制。
  • 完成解锁后会有回调函数,用来触发进一步的数据处理。

 

unlock.js使用:

1、引入

<link href="path/to/css/unlock.css" rel="stylesheet">
<script src='path/to/js/unlock.js'></script>

2、html

<!--滑块容器-->
<div id = "foo"></div>

3、初始化

var $container = $('#foo');
$container.slideToUnlock(options);

4、配置参数

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

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!