jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
unlock.js插件具有以下特點(diǎn):
滑動(dòng)解鎖。
尺寸、顏色、字體大小等都可以個(gè)性化定制。
完成解鎖后會(huì)有回調(diào)函數(shù),用來(lái)觸發(fā)進(jìn)一步的數(shù)據(jù)處理。
如何使用
1. 首先在頁(yè)面中引入unlock.css和unlock.js文件。
<link href="css/unlock.css" rel="external nofollow" rel="stylesheet"> <script src='js/unlock.js'></script>
2. 然后布置簡(jiǎn)單的HTML的結(jié)構(gòu),使用一個(gè)<div>作為滑塊的容器。
<!--滑塊容器--> <div id = "foo"></div>
3. 最后初始化插件。在頁(yè)面DOM元素加載完畢之后,可以通過(guò)下面的方法來(lái)初始化該滑動(dòng)解鎖插件。
var $container = $('#foo'); $container.slideToUnlock(options);
配置參數(shù)
unlock.js滑動(dòng)解鎖插件的配置參數(shù)有:
參數(shù) | 默認(rèn)值 | 描述 |
width | 默認(rèn)為容器的寬度 | 滑塊的寬度 |
height | 默認(rèn)為容器的高度 | 滑塊的高度 |
bgColor | #E8E8E8 | 滑塊的背景顏色 |
progressColor | #FFE97F | progress的顏色 |
handleColor | #fff | 滑塊手柄的顏色 |
succColor | #78D02E | 成功解鎖后的顏色 |
text | 'slide to unlock' | 滑塊上的默認(rèn)文字 |
textColor | #000 | 文字的顏色 |
succText | 'ok!' | 成功解鎖后顯示的文字 |
succTextColor | #000 | 成功解鎖后顯示的文字顏色 |
succFunc | function() { alert('successfully unlock!'); } | 成功解鎖后的回調(diào)函數(shù) |
更多有關(guān)unlock插件信息,請(qǐng)?jiān)L問項(xiàng)目github地址為: https://github.com/menthe/unlock.js
以上所述是小編給大家介紹的jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖思路詳解,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
- JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- 使用 Node.js 模擬滑動(dòng)拼圖驗(yàn)證碼操作的示例代碼
- JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
- javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
- 原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能?js實(shí)現(xiàn)滑動(dòng)拼圖解鎖
相關(guān)文章
jQuery EasyUI 中文API Layout(Tabs)
發(fā)布jQuery EasyUI 中文API—Layout(Tabs)總結(jié),需要的朋友可以參考下。2010-04-04為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過(guò)JSON數(shù)據(jù)加載,有需要的朋友,可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。2010-10-10Jquery 垂直多級(jí)手風(fēng)琴菜單附源碼下載
本文給大家分享一款簡(jiǎn)單但實(shí)用的多級(jí)垂直手風(fēng)琴下拉菜單列表,完全使用css來(lái)制作多級(jí)手風(fēng)琴菜單,通過(guò)該代碼將不同的子菜單進(jìn)行分組制作出多級(jí)菜單的效果,本文附效果演示和源碼下載感興趣的朋友一起學(xué)習(xí)吧2015-11-11淺析jQuery中調(diào)用ajax方法時(shí)在不同瀏覽器中遇到的問題
這篇文章主要介紹了jQuery中調(diào)用ajax方法時(shí)在不同瀏覽器中遇到的問題,因不同瀏覽器默認(rèn)設(shè)置的不同造成的問題2014-06-06Jquery中的CheckBox、RadioButton、DropDownList的取值賦值實(shí)現(xiàn)代碼
隨著Jquery的作用越來(lái)越大,使用的朋友也越來(lái)越多。在Web中,由于CheckBox、 Radiobutton 、 DropDownList等控件使用的頻率比較高,就關(guān)系到這些控件在Jquery中的操作問題2011-10-10jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
jQuery UI Dialog是jQuery UI的彈出對(duì)話框組件,使用它可以創(chuàng)建各種美觀的彈出對(duì)話框;它可以設(shè)置對(duì)話框的標(biāo)題、內(nèi)容,并且使對(duì)話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉;平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04jquery.combobox中文api和例子,修復(fù)了上面的小bug
關(guān)于jquery.combobox,這個(gè)jquery的插件從官網(wǎng)上直接下載下來(lái)使用還有bug,以下是我對(duì)其api做的簡(jiǎn)單翻譯,而且修復(fù)了上面的bug。2011-03-03jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程
這篇文章為大家分享了一個(gè)jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程,外觀看上去非常大氣,感興趣的小伙伴們可以參考一下2015-11-11jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法,實(shí)例分析了jQuery圖片淡入淡出效果的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06