基于SVG的jquery手势密码解锁插件

这是一款仿安卓的基于SVG的jquery手势密码解锁插件。你可以设置手势密码，以及验证手势密码，使用非常方便。

在线演示   下载

 使用方法

在页面中引入jquery和patternlock.js文件，以及patternlock.css文件。

?

1 2 3

< link href="patternlock.css" rel="stylesheet" type="text/css" /> < script src="jquery.min.js"> < script src="patternlock.js">

 HTML结构

创建一个有9个点的手势解锁屏幕。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< svg class="patternlock" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">   < g class="lock-actives">   < g class="lock-lines">   < g class="lock-dots">       < circle cx="20" cy="20" r="2"/>       < circle cx="50" cy="20" r="2"/>       < circle cx="80" cy="20" r="2"/>         < circle cx="20" cy="50" r="2"/>       < circle cx="50" cy="50" r="2"/>       < circle cx="80" cy="50" r="2"/>         < circle cx="20" cy="80" r="2"/>       < circle cx="50" cy="80" r="2"/>       < circle cx="80" cy="80" r="2"/>     < svg >

 初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。

?

1 2 3 4 5 6

var e = document.getElementById( 'lock' ) var p =  new PatternLock(e, {     onPattern:  function () {       this .success()     } });

 方法

• clear()：清除当前的模式。
• success()：验证输入的模式是否成功。
• error()：验证输入的模式是否失败。
• getPattern()：获取当前的而输入模式，得到模式或者NaN。