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中的deferred使用方法
Mar 27 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现图片放大镜效果
Dec 23 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代码审核的详细介绍
2013/06/13 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php三元运算符知识汇总
2015/07/02 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
大学生英语演讲稿
2014/04/24 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014年女职工工作总结
2014/11/27 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
英文辞职信范文
2015/05/13 职场文书
早会开场白台词大全
2015/06/01 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python