unlock中怎么實(shí)現(xiàn)一個(gè)滑動(dòng)解鎖插件

本篇文章為大家展示了unlock中怎么實(shí)現(xiàn)一個(gè)滑動(dòng)解鎖插件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

　　unlock.js插件具有以下特點(diǎn)：

　　滑動(dòng)解鎖。

　　尺寸、顏色、字體大小等都可以個(gè)性化定制。

　　完成解鎖后會(huì)有回調(diào)函數(shù)，用來(lái)觸發(fā)進(jìn)一步的數(shù)據(jù)處理。

　　unlock.js插件如何使用

　?。?首先在頁(yè)面中引入unlock.css和unlock.js文件。

　　<linkhref="css/unlock.css"rel="externalnofollow"rel="stylesheet">

　　<scriptsrc='js/unlock.js'></script>

　　2.然后布置簡(jiǎn)單的HTML的結(jié)構(gòu)，使用一個(gè)<div>作為滑塊的容器。

　　<!--滑塊容器-->

　　<divid="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 'slidetounlock' 滑塊上的默認(rèn)文字

　　textColor #000 文字的顏色

　　succText 'ok!' 成功解鎖后顯示的文字

　　succTextColor #000 成功解鎖后顯示的文字顏色

　　succFunc function(){alert('successfullyunlock!');} 成功解鎖后的回調(diào)函數(shù)

上述內(nèi)容就是unlock中怎么實(shí)現(xiàn)一個(gè)滑動(dòng)解鎖插件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。