人靠衣装,机靠壳装

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

2018-09-14 11:27 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

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


仿手机登录界面,手势解锁密码,你可以设置手势密码,以及验证手势密码


使用方法

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

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


HTML结构

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

<svg class="patternlock" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g class="lock-actives"></g>
  <g class="lock-lines"></g>
  <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"/>
  </g>
<svg>


初始化插件

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

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


方法

  • clear():清除当前的模式。

  • success():验证输入的模式是否成功。

  • error():验证输入的模式是否失败。

  • getPattern():获取当前的而输入模式,得到模式或者NaN


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 相关链接

在线演示

0
猜你喜欢
更多发现
子导航JS代码