jquery滑动插件,jquery滑动效果

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地址为：

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

相关问答

Q1: jquery滑块拖动验证插件使用

文章参考自： 链接

需要jq币，鉴于经常逛jQuery插件库，花了30大洋买了100jq币，发现开发还是挺费钱的，，，哈哈

搞定

此插件直接使用可能不是很适合具体业务需求，可以根据自身需要修改slide-unlock.css样式文件，比如说将#slider中的margin: 100px auto;改成margin: 10px auto;这样margin值减小为10px，可能更适合

Q2: jquery怎么实现移动端手指滑动事件

一、原理及实现方法如下：

1、当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；

2、当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

二、注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放 

通过meta元标签来设置。

2.禁止滚动 

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。 

event.preventDefault()。

Q3: jQuery的swiper插件怎么设置只能像右滑动

allowSwipeToPrev

设为false可禁止向左或上滑动。

使用方法示例

var mySwiper = new Swiper('.swiper-container',{

allowSwipeToPrev : false,

})