jQuery+CSS屏幕解锁插件patternLock.js

jQuery+CSS屏幕解锁插件patternLock.js

屏幕解锁基于HTML,jQuery和CSS,模拟混合应用程序设计。解锁原理,如果要设置自己的解锁密码请按如下方式,将patternLock九宫格的九个区域类比成1-9这九个数字,当你依次点击滑动连接1-5-9对应区域,则意味着得到的匹配字串即为“159”,再将其与随机生成的标准答案字串对比即得结果。

在代码中查找pattern.checkForPattern("1235789", function(),根据数字1235789连线所得到的图案为Z字型,您可根据所需进行修改。

使用方法
CSS样式代码

1
2
3
4
5
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
<link rel='stylesheet' href='css/animate.min.css'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='css/pattern-lock.min.css'>
<link rel="stylesheet" href="css/style.css">

HTML结构
页面需要使用的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<div class="mhn-ui-wrap">
<div class="mhn-ui-page page-lock">
<div class="mhn-ui-date-time">
<div class="mhn-ui-time">6:02 PM</div>
<div class="mhn-ui-day">星期三</div>
<div class="mhn-ui-date">1010, 2019</div>
</div>
<div class="mhn-lock-wrap">
<div class="mhn-lock-title" data-title="绘制图案解锁"></div>
<div class="mhn-lock"></div>
</div>
</div>
<div class="mhn-ui-page page-home">
<div class="mhn-ui-app-time">&nbsp;</div>
<div class="mhn-ui-app-title-head">
<span class="mhn-ui-page-title">All Application</span>
<div class="mhn-ui-filter">
<span class="mhn-ui-btn ion-funnel"></span>
<div class="mhn-ui-filter-list">
<div data-filter="all" class="active">All Application</div>
<div data-filter="general">General Application</div>
<div data-filter="social">Social Application</div>
<div data-filter="credits">Credits Application</div>
</div>
</div>
</div>
<div class="mhn-ui-row mhn-ui-apps">
<div class="mhn-ui-col" data-filter="general">
<div class="mhn-ui-icon" data-open="page-author">
<span class="ion-person" data-color="#2980b9"></span>
<div class="mhn-ui-icon-title">Author</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="general">
<div class="mhn-ui-icon" data-open="page-contact">
<span class="ion-chatbox" data-color="#8e44ad"></span>
<div class="mhn-ui-icon-title">Contact</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="general">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-ios-briefcase" data-color="#f39c12"></span>
<div class="mhn-ui-icon-title">Portfolio</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="general">
<div class="mhn-ui-icon" data-open="page-credits">
<span class="ion-information-circled" data-color="#16a085"></span>
<div class="mhn-ui-icon-title">Credits</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="social">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-social-facebook" data-color="#3b5998"></span>
<div class="mhn-ui-icon-title">Facebook</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="social">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-social-twitter" data-color="#56a3d9"></span>
<div class="mhn-ui-icon-title">Twitter</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="credits">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-social-javascript" data-color="#6639b6"></span>
<div class="mhn-ui-icon-title">jQuery</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="credits">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-ionic" data-color="#3e50b4"></span>
<div class="mhn-ui-icon-title">Ionicons</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="credits">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-social-css3-outline" data-color="#785447"></span>
<div class="mhn-ui-icon-title">Animate</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="credits">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-android-camera" data-color="#000000"></span>
<div class="mhn-ui-icon-title">Unsplash</div>
</div>
</div>
<div class="mhn-ui-col" data-filter="credits">
<div class="mhn-ui-icon" data-href="#">
<span class="ion-android-unlock" data-color="#4bae4f"></span>
 <div class="mhn-ui-icon-title">patternLock</div>
</div>
</div>
</div>
<div class="mhn-ui-bottom-link-bar">
<span class="mhn-ui-bottom-btn ion-ios-home"></span>
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
</div>
</div>
<div class="mhn-ui-page page-author">
<div class="mhn-ui-app-time"></div>
<div class="mhn-ui-app-title-head"><span class="ion-person"></span> Author</div>
<div class="text-center"><img class="flipInX animated" src="img/t.png"></div>
<p class="text-center">Hi, It's me Mohan. I'm a web and graphics designer. Designing is my passion and I have been working on various designing projects.</p>
<div class="mhn-ui-bottom-link-bar">
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
</div>
</div>
<div class="mhn-ui-page page-contact">
<div class="mhn-ui-app-time">&nbsp;</div>
<div class="mhn-ui-app-title-head"><span class="ion-chatbox"></span> Contact</div>
<div class="mhn-ui-bottom-link-bar">
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
</div>
</div>
<div class="mhn-ui-page page-credits">
<div class="mhn-ui-app-time">&nbsp;</div>
<div class="mhn-ui-app-title-head"><span class="ion-information-circled"></span> Credits</div>
<div class="mhn-ui-credit-list">
<div class="mhn-ui-credit">
<p>jQuery is a fast, small, and feature-rich JavaScript library.</p>
</div>
</div>
<div class="mhn-ui-bottom-link-bar">
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
</div>
</div>
<div class="mhn-ui-dialog-wrap">
<div class="mhn-ui-dialog">
<div class="mhn-ui-dialog-title">Are you sure?</div>
<p>This application wants to open an external link. To confirm, please click on yes button.</p>
<a data-action="confirm" class="mhn-ui-dialog-btn">Yes</a>
<a data-action="cancel" class="mhn-ui-dialog-btn">No</a>
</div>
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论