unlock.js插件具有以下特點：
滑動解鎖。
尺寸、顏色、字體大小等都可以個性化定制。
完成解鎖后會有回調函數，用來觸發進一步的數據處理。
如何使用
１. 首先在頁面中引入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插件實現滑動解鎖思路詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
