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

JavaScript029

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

用动态添加嘛 给一个id=a 给这个div 判断 如果div到达某个位置 就 $("#a").append($("")) 否则就 $("#a").empty() 顺便说一句 滑动不需要任何插件 自己就能实现 去看看 animate（） 这个方法 ！

1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，

2：还有移动端的zepto库 也有手势插件，

3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，

4：早期的应该是用wml语言支持的WMLScript实现。

5：举例：使用iscroll.js实现

1）下载iScroll.js，百度搜索iScroll.js下载即可

2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件

3）编写规范的html格式

只有如下格式才能实现滑动效果

<div id="wrapper">

<div class="scroll">

这个区域可以滑动

</div>

</div>

如下格式不能滑动

<div id="wrapper">

<div class="other">这个区域可以滑动</div>

<div class="scroll">

这个区域不可以滑动了

</div>

</div>

只有wrapper的第一个子元素才能实现滑动效果。

4）编写js调用代码

var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})

第一参数必需是滑动元素的父元素的id。

主要参数一览：

hScroll: true, 左右滑动，默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条，默认为显示

vScrollbar: true,是否显示X轴滚动条，默认为显示