成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

巧用patternLock開發(fā)圖案滑屏解鎖

Atom / 1040人閱讀

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

作者的話： 
基于patternLock插件實現(xiàn)九宮格登陸校驗功能。其亮點在于摒棄傳統(tǒng)校驗方式同時融合產(chǎn)品文化。同上一篇文章一樣，本次實現(xiàn)功能剝離至本人15年畢設(shè)項目《ReBook》。下面介紹主要思路，詳情請戳后面源碼鏈接。
效果圖：

左側(cè)：九宮格滑動區(qū)域，右側(cè)：登陸、提示區(qū)域

根據(jù)提示點擊滑動，依次連接“借書圖標(biāo)”-“換書圖標(biāo)”-“購書圖標(biāo)”（以下簡稱“借換購”）即得結(jié)果：

開發(fā)步驟：

1. 引入相關(guān)插件文件：

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

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

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

3. 實現(xiàn)登陸窗口

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

4. 解鎖原理

同傳統(tǒng)隨機數(shù)字校驗方式相同，我們在看到扭曲、模糊等花樣作死的數(shù)字（或字母、文字）后，鈦合金雙眼識別成功后輸入對應(yīng)數(shù)字即校驗成功。
同理，我們將patternLock九宮格的九個區(qū)域類比成1-9這九個數(shù)字，當(dāng)你依次點擊滑動連接1-5-9對應(yīng)區(qū)域，則意味著得到的匹配字串即為“159”，再將其與隨機生成的標(biāo)準(zhǔn)答案字串對比即得結(jié)果。
                                1 2 3
                                4 5 6
                                7 8 9
對應(yīng)的代碼如下：
// 正確答案串
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圖標(biāo)之后是不是就大功告成了呢？

5. 前方高能

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

6.Demo源碼

附錄：

patternLock官網(wǎng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111274.html

相關(guān)文章

  • 巧用patternLock開發(fā)圖案滑屏解鎖

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

    enrecul101 評論0 收藏0

  • JavaScript新鮮事·第5期

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

    TesterHome 評論0 收藏0

  • 滑屏組件----slide

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

    Me_Kun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<