巧用patternLock開發圖案滑屏解鎖_html/css

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

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

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

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

同傳統隨機數字校驗方式相同，我們在看到扭曲、模糊等花樣作死的數字（或字母、文字）后，鈦合金雙眼識別成功后輸入對應數字即校驗成功。同理，我們將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圖標之后是不是就大功告成了呢？

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