微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

unlock.js插件具有以下特点:

滑动解锁。

尺寸、颜色、字体大小等都可以个性化定制。

完成解锁后会有回调函数,用来触发进一步的数据处理。

如何使用

1. 首先在页面中引入unlock.css和unlock.js文件

rush:js;"> nofollow" rel="stylesheet">

2. 然后布置简单的HTML的结构,使用一个
作为滑块的容器。

rush:js;">

3. 最后初始化插件。在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滑动解锁插件

rush:js;"> var $container = $('#foo'); $container.slidetoUnlock(options);

配置参数

unlock.js滑动解锁插件的配置参数有:

ottom: 1.5em; max-width: 100%; border-top: rgb(221,221,221) 1px solid; border-right: rgb(221,221) 1px solid; width: 684px; white-space: normal; word-spacing: 0px; border-collapse: separate; border-bottom: rgb(221,221) 1px solid; text-transform: none; color: rgb(51,51,51); font: 14px/1.3em 'Helvetica Neue',Helvetica,Tahoma,Arial,STXihei,'Microsoft YaHei',微软雅黑,sans-serif; border-spacing: 0px; widows: 1; letter-spacing: normal; background-color: rgb(254,254,254); text-indent: 0px; border-radius: 4px; -webkit-text-stroke-width: 0px"> ottom: 8px; text-align: left; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.3em; padding-right: 8px; border-top-width: 0px">参数ottom: 8px; text-align: left; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.3em; padding-right: 8px; border-top-width: 0px">认值ottom: 8px; text-align: left; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.3em; padding-right: 8px; border-top-width: 0px">描述ottom: 8px; text-align: left; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.3em; padding-right: 8px">width默认为容器的宽度默认为容器的高度默认文字文字的颜色显示的文字显示的文字颜色ottom-left-radius: 4px">succFuncottom-right-radius: 4px">成功解锁后的回调函数

更多有关unlock插件信息,请访问项目github地址为: https://github.com/menthe/unlock.js

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

原文地址:https://www.jb51.cc/jquery/40221.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐