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

JavaScript014

jQuery使用unlock.js插件实现滑动解锁,第1张

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插件实现滑动解锁思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

PC的信息+时间戳+url信息+请求体,混合成的一段字符串经过位运算后再zlib压缩再base64加密再url编码而成。美团各个平台都易出滑块,问题就出在url后的token参数上,token参数的是也是js加密生成的,最终解决办法就是,一步一步单步调试,其本质也就是:PC的信息+时间戳+url信息+请求体,混合成的一段字符串经过位运算后再zlib压缩再base64加密再url编码而成。

这个确实比较多,常用的特效就是 淡入淡出啊、渐变啊、滑动、展开伸缩、移动、拖动、最常用。其实你看下jQuery ui的官网基本就了解了所有常用的特效了

按类型可以分为下面几大类的特效集合:

Ui 类的:

背景

对话框

筛选及排序

反馈

弹出层

悬停

布局

图表

加载

圆边

滚动

标签

文本链接

工具提示

网络类型

输入类型的:

拾色器

定制和风格

日期和时间

拖和放

通用输入

自动完成

密码

投票率

搜索

选择框

快捷键

触摸

丰富的输入

上传

验证

媒体类型:

音频和视频

幻灯片和轮播图

图片展示

图像

地图

滑块和旋转

Tabs

导航:

水平导航

垂直导航

文件树

分页

手风琴菜单

其他