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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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基础教程 php内置函数实例教程
2012/08/21 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
详解Python自建logging模块
2018/01/29 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python常用断言函数实例汇总
2020/11/30 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
介绍一下write命令
2014/08/10 面试题
优秀毕业生推荐信
2013/11/02 职场文书
党员志愿者活动总结
2014/06/26 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
Python合并多张图片成PDF
2021/06/09 Python
青岛市的收音机研制与生产
2022/04/07 无线电