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

JavaScript028

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

下载最新的chrome driver,然后放到一个目录下,再手动置顶chrome driver位置进行调用 java代码如下 System.setProperty("webdriver.chrome.driver", "D:\\software\\chromedriver_win32\\chromedriver.exe")Python应该是类似