巧用patternLock开发图案滑屏解锁

enrecul101 发布于2019-08-19 17:18 / 1907人阅读

摘要：此外，本例还使用到了相关文件。制作个性化的九宫格图本图将品牌字母融入其中，同时包含了网站三大特色业务借换购。此外，还有个问题。

作者的话：

基于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官网

云服务器专线服务指纹解锁开发 patternLock 巧用滑屏移动视图类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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