unlock.js

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

#FFE97F

progress的颜色

handleColor

#fff

滑块手柄的颜色

succColor

#78D02E

成功解锁后的颜色

text

'slide to unlock'

滑块上的默认文字

textColor

#000

文字的颜色

succText

'ok!'

成功解锁后显示的文字

succTextColor

#000

成功解锁后显示的文字颜色

succFunc

function() { alert('successfully unlock!'); }

成功解锁后的回调函数

网站地址:https://github.com/menthe/unlock.js

GitHub:https://github.com/menthe/unlock.js

网站描述:一款jQuery滑动解锁插件

unlock.js

官方网站：https://github.com/menthe/unlock.js