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

　　

　　

滑动解锁。

　　

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

　　

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

　　

　　

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

　　 　　 　　& lt;链接的href=" https://www.yisu.com/zixun/css/unlock.css " rel=巴獠縩ofollow”rel=把奖怼北? 　　& lt;脚本src=" https://www.yisu.com/zixun/js/unlock.js "祝辞& lt;/script> 　　 　　

<强> 2。然后布置简单的HTML的结构,使用一个& lt; div>作为滑块的容器。

　　 　　 　　& lt; !——滑块容器——比; 　　& lt; div id=" foo "祝辞& lt;/div>之前 　　 　　

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

　　 　　 　　var容器=美元(“# foo”); 　　美元container.slideToUnlock(选项);之前 　　 　　

　　

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

　　

　　 　　 　　 　　参数 　　默认值 　　描述 　　 　　 　　 　　 　　宽度 　　默认为容器的宽度 　　滑块的宽度 　　 　　 　　高度 　　默认为容器的高度 　　滑块的高度 　　 　　 　　告诉我们 　　# E8E8E8 　　滑块的背景颜色 　　 　　 　　progressColor 　　# FFE97F 　　进步的颜色 　　 　　 　　handleColor 　　# fff 　　滑块手柄的颜色 　　 　　 　　succColor 　　# 78 d02e 　　成功解锁后的颜色 　　 　　 　　文本 　　“滑动解锁” 　　滑块上的默认文字 　　 　　 　　输入textColor 　　# 000 　　文字的颜色 　　 　　 　　succText 　　“好吧!” 　　成功解锁后显示的文字 　　 　　 　　succTextColor 　　# 000 　　成功解锁后显示的文字颜色 　　 　　 　　succFunc 　　函数(){alert('成功解锁! ');} 　　成功解锁后的回调函数 　　 　　 　　 　　

　　

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

　　

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

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