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


Posted in jQuery onApril 04, 2017

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

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
You might like
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php简单实现快速排序的方法
2015/04/04 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python实现数据图表
2017/07/29 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python数据爬下来保存的位置
2020/02/17 Python
python实现井字棋小游戏
2020/03/04 Python
python调用摄像头的示例代码
2020/09/28 Python
迟到检讨书900字
2014/01/14 职场文书
普通党员对照检查材料
2014/08/28 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
针对吵架老公保证书
2015/05/08 职场文书
交通处罚决定书
2015/06/24 职场文书
《确定位置》教学反思
2016/02/18 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android