巧用patternLock开发图案滑屏解锁_html/css_WEB-ITnose

作者的话：

基于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源码

附录：

1. patternLock官网