jQuery使用unlock.js插件实现滑动解锁

unlock.js插件具有以下特点：

滑动解锁。

尺寸、颜色、字体大小等都可以个性化定制。

完成解锁后会有回调函数，用来触发进一步的数据处理。

如何使用

1.

首先在页面中引入unlock.css和unlock.js文件。

<link

href="css/unlock.css"

rel="external

nofollow"

rel="stylesheet">

<script

src='js/unlock.js'></script>

2.

然后布置简单的HTML的结构，使用一个<div>作为滑块的容器。

<!--滑块容器-->

<div

id

=

"foo"></div>

3.

最后初始化插件。在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该滑动解锁插件。

var

$container

=

$('#foo')

$container.slideToUnlock(options)

配置参数

unlock.js滑动解锁插件的配置参数有：

参数

默认值

描述

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!')

}

成功解锁后的回调函数

更多有关unlock插件信息，请访问项目github地址为：

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

以上所述是小编给大家介绍的jQuery使用unlock.js插件实现滑动解锁思路详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

●苹果手机iOS10版本滑动解锁已经被“按下主屏幕按钮以打开”取代：

1、未设置指纹解锁的苹果手机屏幕解锁方式用“按下主屏幕按钮以打开”取代滑动解锁。

2、设置指纹解锁的苹果手机需要先用指纹解锁再“按下主屏幕按钮以打开”主屏幕，这种设计的目的是为了防止锁屏状态时拇指按压（解锁首选）主屏幕键时打开主屏幕。当然也可以设置使用指纹解锁直接打开主屏幕（设置-通用-辅助功能-主屏幕按钮-开启“轻触打开”按钮）。

---