巧用patternLock開發圖案滑屏解鎖

enrecul101 發布于2019-08-19 17:18 / 1996人閱讀

摘要：此外，本例還使用到了相關文件。制作個性化的九宮格圖本圖將品牌字母融入其中，同時包含了網站三大特色業務借換購。此外，還有個問題。

作者的話：

基于patternLock插件實現九宮格登陸校驗功能。其亮點在于摒棄傳統校驗方式同時融合產品文化。同上一篇文章一樣，本次實現功能剝離至本人15年畢設項目《ReBook》。下面介紹主要思路，詳情請戳后面源碼鏈接。

效果圖：

左側：九宮格滑動區域，右側：登陸、提示區域

根據提示點擊滑動，依次連接“借書圖標”-“換書圖標”-“購書圖標”（以下簡稱“借換購”）即得結果：

開發步驟：

1. 引入相關插件文件：

主要有patternLock.js/patternLock.css。此外，本例還使用到了bootstrap、jquery相關文件。

2. 制作個性化的九宮格圖：

本圖將品牌REBOOK字母融入其中，同時包含了網站三大特色業務LOGO（借換購）。在此我只做了一張大圖，在css中使用background-position定位。當然你也可以分解成9張小圖來實現。

3. 實現登陸窗口

form表單input實現之類的大家都會，只是美與丑的差別，此處省略。

4. 解鎖原理

同傳統隨機數字校驗方式相同，我們在看到扭曲、模糊等花樣作死的數字（或字母、文字）后，鈦合金雙眼識別成功后輸入對應數字即校驗成功。
同理，我們將patternLock九宮格的九個區域類比成1-9這九個數字，當你依次點擊滑動連接1-5-9對應區域，則意味著得到的匹配字串即為“159”，再將其與隨機生成的標準答案字串對比即得結果。
                                1 2 3
                                4 5 6
                                7 8 9
對應的代碼如下：
// 正確答案串
var rightAnswer = "";
// 初始化九宮格
var lock = new PatternLock("#patternContainer");
lock.checkForPattern(rightAnswer,function(){
// 校驗成功，激活登陸按鈕
    $("#login").attr("disabled",false);
    $("#login").removeClass("buttonDis");
    //alert("驗證成功");
},function(){
    lert("連錯了，再試一次");
   lock.reset();
}); 
此時，我們描繪的只是一個裸著的patternLock，那待我們給九個娃娃穿上漂亮的CSS圖標之后是不是就大功告成了呢？

5. 前方高能

我們設想一次驗證過程，假如本次后臺生成的標準字串值為“589”。那么，我們需要給“5”娃穿上“借書圖標”、“8”娃穿上“換書圖標”、“9”娃穿上“購書圖標”，其他娃娃們就隨便穿了。因為對于用戶們來說，不論后臺生成的標答是什么，他們的標答永遠都是依次連接“借換購”就能驗證成功。所以我們，在九宮格區域映射對應樣式過程需要劃分成兩部分，一部分專屬標答隨機映射，一部分剩余部分的隨意映射，實現每次用戶進入看到的展示效果不同。
此外，還有個問題。如果真的太隨機了對于用戶在電腦上連接確實會有一定的難度，用戶體驗下降。于是本例做了小小的限制，將標答的產生范圍從3X3縮小到了2X2（即5689對于區域）。

6.Demo源碼

附錄：

patternLock官網

云服務器 GPU云服務器指紋解鎖開發 patternLock 巧用滑屏移動視圖類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78400.html

巧用patternLock開發圖案滑屏解鎖

摘要：此外，本例還使用到了相關文件。制作個性化的九宮格圖本圖將品牌字母融入其中，同時包含了網站三大特色業務借換購。此外，還有個問題。作者的話：基于patternLock插件實現九宮格登陸校驗功能。其亮點在于摒棄傳統校驗方式同時融合產品文化。同上一篇文章一樣，本次實現功能剝離至本人15年畢設項目《ReBook》。下面介紹主要思路，詳情請戳后面源碼鏈接。效果圖：左側：九宮格滑動區域，右側...

Atom 2019-08-28 18:30 評論0 收藏0
JavaScript新鮮事·第5期

摘要：官網一個處理的庫，可以在與之間互相轉換，還可以使用處理大文件。官網類似系統圖案解鎖的東西。原文地址發布發布了版本，是一套遵循規范的框架，目前支持，而支持的仍在階段。 ShiftJS showImg(https://segmentfault.com/img/bVCf71); 一個Swift轉JavaScript的編譯器。官網：http://www.shiftjs.com toolgif ...

TesterHome 2019-08-20 10:25 評論0 收藏0
滑屏組件----slide

摘要：滑屏組件自定義滑屏組件，可定制滑屏動畫可控制每屏動畫效果訪問滑屏組件必填傳入滑動容器選填滑動時切換動畫，默認選填記錄當前瀏覽頁面選填切換完成回調選填下滑完成時回調選填上滑完成時回調選填滑動過程動畫效果必填，傳入滑動容器選填，滑動時切換動 slide 滑屏組件自定義滑屏組件，可定制滑屏動畫可控制每屏動畫效果 Install git clone https://github.com...

Me_Kun 2019-08-22 10:58 評論0 收藏0