unlock.js特点：

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

 

unlock.js使用：

1、引入

<link href="/go/?url=path/to/css/unlock.css" class="target" rel="external nofollow" 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!'); }	乐成解锁后的回调函数

链接: http://www.fly63.com/nav/296