致力于培养面向设计及开发领域的高端人才，以学员就业为目的！
科迅教育老师直接接听
微信扫码拨号
- 主页
-
课程
- 主打课程
- JavaEE+分布式开发培训班 H5/web前端全栈开发培训班 全链路UI/UE交互设计培训班 室内全案设计培训班 CNC数控编程培训班 Python人工智能开发培训班 平面设计培训班 淘宝美工培训班 UG模具设计培训班
- IT开发类
- IT培训班 软件开发培训班 Java培训班 Java全栈开发培训班 web培训班 web前端全栈开发培训班 Web/H5前端培训班班 Python培训班 PHP开发培训班 ASP.NET开发培训班 大数据开发培训班 C语言培训班 C/C++开发培训班 C#开发培训班 嵌入式开发培训班 软件测试培训班 数据库开发培训班 计算机编程培训班 电脑编程开发培训班 程序员培训班 IOS培训班 iphone开发培训班 Android开发培训班 网站建设专业培训班班 网络营销培训全能班
- 视觉设计类
- 视频剪辑创作培训 短视频剪辑培训 平面设计培训班课程 美工培训班 UI设计培训班 UE交互培训班 UI/UXD全能设计师培训班 电脑设计培训班 广告设计培训班 网页设计培训班 网页前端培训班 品牌设计培训班 创意设计培训班 企业VI设计培训班 游戏界面设计培训班 视觉设计全能培训班 网络营销实战班
- 淘宝电商类
- 抖音运营培训 淘宝开店培训班 淘宝美工设计培训班 淘宝设计培训班 淘宝运营推广培训班 网店设计培训班 网店美工培训班 网店运营推广培训班 电商美工培训班 电商设计培训班 电商运营培训班 美工运营培训班 淘宝电商运营培训班 电子商务培训班
- 设计软件类
- PS设计/Photoshop软件培训班 AI设计/Illustrator软件培训 C4D设计/Cinema 4D软件培训班 AE设计/After Effects培训 CDR设计/CorelDRAW软件培训班 CAD设计/AutoCAD软件培训班 3DMAX设计/3ds MAX软件培训班
- 室内设计类
- 室内设计培训班 室内基础软件培训班 室内手绘设计培训班 室内设计谈单技巧培训班 CAD施工图培训班 CAD图纸深化设计培训班 室内设计制图培训班 室内施工工艺培训班 3dmax效果图培训班 sketchup草图大师培训班 Vray渲染培训班 软装设计培训班 家居设计培训班 家具设计培训班 橱柜设计培训班 全屋定制设计培训班 整木定制设计培训班 家装设计培训班 整装设计师培训班 全案设计师培训班 室内装饰设计培训班 室内装修设计培训班 室内装潢设计培训班
- 老师
- 视频
- 真实学费(6)
- 真实评价(9)
- 校区
- 简介
- 资讯
- 资料
- 问答(1)
jQuery手机屏幕手势解锁代码
内容介绍
今天我们来分享是一款用jquery实现的手机解锁界面，非常好看，下面我们先看图
我们先来看html部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery手机屏幕手势解锁代码 </title>
<!--字体-->
<!--动画库-->
<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/jiesuo.css">
</head>
<body>
<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">10月 10, 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"> </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"> </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"> </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>
<div class="mhn-ui-info">绘制'Z'形状开始解锁:)</div>
<script src="js/jquery.min.js"></script>
<script src="js/jiesuo.js"></script>
</body>
</html>>
接下来放出css部分的代码
.patt-holder {
background: #3382c0;
-ms-touch-action: none
}
.patt-wrap {
position: relative;
cursor: pointer
}
.patt-wrap li, .patt-wrap ul {
list-style: none;
margin: 0;
padding: 0
}
.patt-circ {
position: relative;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box
}
.patt-circ.hovered {
border: 3px solid #090
}
.patt-error .patt-circ.hovered {
border: 3px solid #BA1B26
}
.patt-hidden .patt-circ.hovered {
border: 0
}
.patt-dots, .patt-lines {
border-radius: 5px;
height: 10px;
position: absolute
}
.patt-dots {
background: #FFF;
width: 10px;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px
}
.patt-lines {
background: rgba(255, 255, 255, .7);
transform-origin: 5px 5px;
-ms-transform-origin: 5px 5px;
-webkit-transform-origin: 5px 5px
}
.patt-hidden .patt-lines {
display: none
}
.mhn-ui-date-time, .text-center {
text-align: center
}
*, :after, :before {
box-sizing: border-box
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.clearfix:after, .clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
body {
margin: 0;
color: #fff;
background-color: #FD6969;
font: 300 14px/18px Roboto, sans-serif
}
a {
color: inherit;
text-decoration: none
}
a:hover {
text-decoration: underline
}
.mhn-ui-wrap {
width: 300px;
height: 475px;
overflow: hidden;
position: relative;
margin: 30px auto 0;
background: url(../img/bg.png) center no-repeat #2c3e50;
box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24)
}
.mhn-ui-wrap:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
position: absolute;
background: rgba(0, 0, 0, .4)
}
.mhn-ui-date-time {
color: #eee;
z-index: 100;
position: relative
}
.mhn-ui-date-time .mhn-ui-time {
font-size: 28px;
font-weight: 400;
margin-bottom: 15px
}
.mhn-ui-date-time .mhn-ui-day {
font-size: 24px;
margin-bottom: 10px
}
.mhn-ui-date-time .mhn-ui-date {
font-size: 18px;
font-weight: 400
}
.mhn-ui-app-time {
padding: 0 5px;
font-size: 12px;
text-align: right;
margin: -15px -15px auto;
background: rgba(0, 0, 0, .6)
}
.mhn-lock-wrap {
left: 0;
right: 0;
bottom: 0;
z-index: 100;
position: absolute
}
.mhn-lock-wrap .mhn-lock-title {
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-lock-wrap .mhn-lock-success {
color: transparent;
text-shadow: none
}
.mhn-lock-wrap .mhn-lock-failure {
color: #f34235
}
.mhn-lock {
margin: auto;
background: 0 0
}
.patt-wrap {
margin: auto;
overflow: hidden
}
.patt-wrap li {
transition: all .4s ease-in-out 0s
}
.patt-dots, .patt-lines {
transition: background .1s ease-in-out 0s
}
.patt-circ {
border: 3px solid transparent
}
.patt-dots {
background: rgba(255, 255, 255, .8)
}
.patt-lines {
background: rgba(255, 255, 255, .4)
}
.patt-circ.hovered {
border-color: #ddd;
background: rgba(255, 255, 255, .2)
}
.patt-error .patt-circ.hovered {
background: rgba(243, 66, 53, .4);
border-color: rgba(243, 66, 53, .8)
}
.patt-error .patt-lines {
background: rgba(243, 66, 53, .5)
}
.patt-success .patt-circ.hovered {
background: rgba(75, 174, 79, .4);
border-color: rgba(75, 174, 79, .8)
}
.patt-success .patt-lines {
background: rgba(75, 174, 79, .5)
}
.mhn-ui-page {
height: 100%;
z-index: 200;
display: none;
padding: 15px;
position: relative
}
.mhn-ui-page.page-lock {
position: initial
}
.mhn-ui-page .mhn-ui-app-title-head {
padding: 15px;
font-size: 16px;
margin: 0 -15px;
background: rgba(0, 0, 0, .4)
}
.mhn-ui-page .mhn-ui-filter {
float: right;
position: relative
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn {
right: 0;
top: -5px;
padding: 5px;
cursor: pointer;
position: absolute;
display: inline-block
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active {
background: teal
}
.mhn-ui-page .mhn-ui-filter-list {
right: 0;
top: 20px;
padding: 5px;
width: 180px;
display: none;
position: absolute;
background: rgba(0, 0, 0, .8)
}
.mhn-ui-page .mhn-ui-filter-list>div {
display: block;
font-size: 14px;
cursor: pointer;
padding: 2px 4px
}
.mhn-ui-page .mhn-ui-filter-list>div.active {
color: teal
}
.mhn-ui-page .mhn-ui-filter-list>div:hover {
background: teal
}
.mhn-ui-page .mhn-ui-filter-list>div.active:hover {
background: 0 0
}
.mhn-ui-page .mhn-ui-row {
margin-top: 15px
}
.mhn-ui-page .mhn-ui-row:after, .mhn-ui-page .mhn-ui-row:before {
content: '';
display: table
}
.mhn-ui-page .mhn-ui-row:after {
clear: both;
display: block
}
.mhn-ui-page .mhn-ui-col {
width: 25%;
float: left;
margin-bottom: 15px
}
.mhn-ui-bottom-link-bar {
left: 0;
right: 0;
bottom: 0;
padding: 15px;
position: absolute;
text-align: center
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn {
width: 40px;
height: 40px;
cursor: pointer;
font-size: 28px;
line-height: 40px;
text-align: center;
border-radius: 50%;
display: inline-block
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1) {
margin-right: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2) {
margin-left: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover {
color: #ccc;
background: rgba(0, 0, 0, .8)
}
.mhn-ui-icon {
text-align: center
}
.mhn-ui-icon span {
width: 55px;
height: 55px;
margin: auto;
display: block;
font-size: 28px;
cursor: pointer;
line-height: 55px;
text-align: center;
border-radius: 15px;
background: rgba(0, 0, 0, .3);
transition: background .4s ease-in-out 0s;
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset
}
.mhn-ui-icon .mhn-ui-icon-title {
margin-top: 5px;
cursor: default;
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-ui-page.page-author img {
padding: 8px;
margin-top: 15px;
border-radius: 50%;
background: rgba(255, 255, 255, .7)
}
.mhn-ui-credit {
padding: 5px;
font-size: 13px;
margin-top: 15px;
background: rgba(0, 0, 0, .2);
border: 1px solid rgba(0, 0, 0, .2)
}
.mhn-ui-credit p {
margin: 0;
color: #aaa
}
.mhn-ui-credit a {
font-weight: 500
}
.mhn-ui-dialog-wrap {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
z-index: 1000;
position: absolute;
background: rgba(0, 0, 0, .7)
}
.mhn-ui-dialog {
padding: 15px;
background: #000;
margin: 50% 0 auto
}
.mhn-ui-dialog .mhn-ui-dialog-title {
font-size: 18px;
font-weight: 500
}
.mhn-ui-dialog .mhn-ui-dialog-btn {
padding: 5px;
min-width: 65px;
cursor: pointer;
margin-right: 10px;
text-align: center;
display: inline-block;
border: 2px solid rgba(255, 255, 255, .8)
}
.mhn-ui-dialog .mhn-ui-dialog-btn:hover {
background: #009688;
text-decoration: none
}
.mhn-ui-info {
margin: 30px 0;
font-size: 16px;
text-align: center
}
.mhn-ui-date, .mhn-ui-time {
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s
}
.mhn-ui-day {
-webkit-animation: rubberBand 1s;
animation: rubberBand 1s
}
.mhn-lock-failure {
-webkit-animation: zoomIn .4s;
animation: zoomIn .4s
}
.patt-circ:nth-child(1), .patt-circ:nth-child(2), .patt-circ:nth-child(3) {
-webkit-animation: fadeInUp .4s;
animation: fadeInUp .4s
}
.patt-circ:nth-child(4), .patt-circ:nth-child(5), .patt-circ:nth-child(6) {
-webkit-animation: fadeInUp .6s;
animation: fadeInUp .6s
}
.patt-circ:nth-child(7), .patt-circ:nth-child(8), .patt-circ:nth-child(9) {
-webkit-animation: fadeInUp .8s;
animation: fadeInUp .8s
}
.mhn-ui-icon span {
-webkit-animation: zoomIn .6s;
animation: zoomIn .6s
}
.mhn-ui-bottom-btn {
-webkit-animation: bounceInUp .8s;
animation: bounceInUp .8s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1) {
-webkit-animation: fadeInUp .4s;
animation: fadeInUp .4s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2) {
-webkit-animation: fadeInUp .5s;
animation: fadeInUp .5s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3) {
-webkit-animation: fadeInUp .6s;
animation: fadeInUp .6s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4) {
-webkit-animation: fadeInUp .7s;
animation: fadeInUp .7s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5) {
-webkit-animation: fadeInUp .8s;
animation: fadeInUp .8s
}
最后脚本部分代码
$(function() {
mhnUI.setup();
});
mhnUI = {
pattern: "",
setup: function() {
this.lock(), this.filter(), this.colors(), this.links.setup(), this.dialog.setup(), setInterval("mhnUI.datetime()", 1e3)
},
lock: function() {
mhnUI.page.hide(), pattern = new PatternLock(".mhn-lock", {
margin: 15
}), $(".mhn-lock-title").html($(".mhn-lock-title").data("title")), pattern.checkForPattern("1235789", function() {
$(".mhn-lock-title").html('<span>Yes! you unlocked pattern</span>'), $(".patt-holder").addClass("patt-success"), setTimeout(function() {
pattern.reset(), mhnUI.message()
}, 1e3), mhnUI.page.show()
}, function() {
$(".mhn-lock-title").html('<span>Opps! pattern is not correct</span>'), $(".patt-holder").removeClass("patt-success"), setTimeout(function() {
pattern.reset(), mhnUI.message()
}, 2e3)
})
},
message: function() {
$(".mhn-lock-title span").fadeOut(), setTimeout(function() {
$(".mhn-lock-title").html($(".mhn-lock-title").data("title")), $(".mhn-lock-title span").fadeIn()
}, 500)
},
datetime: function() {
var t = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"),
e = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"),
n = new Date,
i = n.getYear();
1e3 > i && (i += 1900);
var a = n.getDay(),
o = n.getMonth(),
s = n.getDate();
10 > s && (s = "0" + s);
var h = n.getHours(),
c = n.getMinutes(),
u = n.getSeconds(),
l = "AM";
h >= 12 && (l = "PM"), h > 12 && (h -= 12), 0 == h && (h = 12), 9 >= c && (c = "0" + c), 9 >= u && (u = "0" + u), $(".mhn-ui-date-time .mhn-ui-day").text(t[a]), $(".mhn-ui-date-time .mhn-ui-date").text(e[o] + " " + s + ", " + i), $(".mhn-ui-date-time .mhn-ui-time").text(h + ":" + c + " " + l), $(".mhn-ui-app-time").text(h + ":" + c + ":" + u + " " + l)
},
page: {
show: function(t) {
t = t ? t : "page-home", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
},
hide: function(t) {
t = t ? t : "page-lock", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
}
},
filter: function() {
$(".mhn-ui-filter .mhn-ui-btn").click(function() {
$(this).toggleClass("active"), $(".mhn-ui-filter-list").toggle(100)
}), $(".mhn-ui-filter-list>div").click(function() {
var t = $(this).data("filter");
$(this).siblings().removeAttr("class"), $(this).addClass("active");
var e = function(t) {
$(".mhn-ui-apps .mhn-ui-col").fadeOut(400), $('.mhn-ui-apps .mhn-ui-col[data-filter="' + t + '"]').fadeIn(400)
};
switch(t) {
case "all":
$(".mhn-ui-apps .mhn-ui-col").fadeIn(400);
break;
case "general":
e(t);
break;
case "social":
e(t);
break;
case "credits":
e(t)
}
$(".mhn-ui-filter-list").toggle(100), $(".mhn-ui-filter .mhn-ui-btn").removeClass("active"), $(".mhn-ui-page-title").text($(this).text())
})
},
colors: function() {
$(".mhn-ui-icon span").on("mouseover", function() {
$(this).css("background", $(this).data("color"))
}).on("mouseout", function() {
$(this).removeAttr("style")
})
},
links: {
setup: function() {
$(".mhn-ui-apps .mhn-ui-icon").click(function() {
var t = $(this).data("href"),
e = $(this).data("open");
t && mhnUI.links.href(t), e && mhnUI.page.show(e)
})
},
href: function(t) {
mhnUI.dialog.show(t)
}
},
dialog: {
setup: function() {
$('.mhn-ui-dialog-wrap,.mhn-ui-dialog-wrap a[data-action="cancel"]').click(function() {
mhnUI.dialog.hide()
}), $(".mhn-ui-dialog").click(function(t) {
t.stopPropagation()
}), $('.mhn-ui-dialog a[data-action="confirm"]').click(function() {
setTimeout(function() {
mhnUI.dialog.hide()
}, 400)
})
},
show: function(t) {
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').attr("href", t), $(".mhn-ui-dialog-wrap").show()
},
hide: function() {
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').removeAttr("href"), $(".mhn-ui-dialog-wrap").fadeOut(400)
}
}
};
/*
patternLock.js v 0.5.0
*/
! function(t, e, n, a) {
"use strict";
function r(t) {
for(var e = t.holder, n = t.option, a = n.matrix, r = n.margin, i = n.radius, o = ['<ul style="padding:' + r + 'px">'], s = 0, l = a[0] * a[1]; l > s; s++) o.push('<li style="margin:' + r + "px; width : " + 2 * i + "px; height : " + 2 * i + "px; -webkit-border-radius: " + i + "px; -moz-border-radius: " + i + "px; border-radius: " + i + 'px; "><div></div></li>');
o.push("</ul>"), e.html(o.join("")).css({
width: a[1] * (2 * i + 2 * r) + 2 * r + "px",
height: a[0] * (2 * i + 2 * r) + 2 * r + "px"
}), t.pattCircle = t.holder.find(".patt-circ")
}
function i(t, e, n, a) {
var r = e - t,
i = a - n;
return {
length: Math.ceil(Math.sqrt(r * r + i * i)),
angle: Math.round(180 * Math.atan2(i, r) / Math.PI)
}
}
function o() {}
function s(e, n) {
var a = this,
i = a.token = Math.random(),
h = p[i] = new o,
u = h.holder = t(e);
if(0 != u.length) {
h.object = a, n = h.option = t.extend({}, s.defaults, n), r(h), u.addClass("patt-holder"), "static" == u.css("position") && u.css("position", "relative"), u.on("touchstart mousedown", function(t) {
d.call(this, t, a)
}), h.option.onDraw = n.onDraw || l;
var c = n.mapper;
h.mapperFunc = "object" == typeof c ? function(t) {
return c[t]
} : "function" == typeof c ? c : l, h.option.mapper = null
}
}
var l = function() {},
p = {},
d = function(e, a) {
e.preventDefault();
var r = p[a.token];
if(!r.disabled) {
r.option.patternVisible || r.holder.addClass("patt-hidden");
var i = "touchstart" == e.type ? "touchmove" : "mousemove",
o = "touchstart" == e.type ? "touchend" : "mouseup";
t(this).on(i + ".pattern-move", function(t) {
h.call(this, t, a)
}), t(n).one(o, function() {
u.call(this, e, a)
});
var s = r.holder.find(".patt-wrap"),
l = s.offset();
r.wrapTop = l.top, r.wrapLeft = l.left, a.reset()
}
},
h = function(e, n) {
e.preventDefault();
var a = e.pageX || e.originalEvent.touches[0].pageX,
r = e.pageY || e.originalEvent.touches[0].pageY,
o = p[n.token],
s = o.pattCircle,
l = o.patternAry,
d = o.option.lineOnMove,
h = o.getIdxFromPoint(a, r),
u = h.idx,
c = o.mapperFunc(u) || u;
if(l.length > 0) {
var f = i(o.lineX1, h.x, o.lineY1, h.y);
o.line.css({
width: f.length + 10 + "px",
transform: "rotate(" + f.angle + "deg)"
})
}
if(u) {
if(-1 == l.indexOf(c)) {
var v, m = t(s[u - 1]);
if(o.lastPosObj) {
for(var g = o.lastPosObj, x = g.i, w = g.j, b = Math.abs(h.i - x), j = Math.abs(h.j - w);
(0 == b && j > 1 || 0 == j && b > 1 || j == b && j > 1) && (w != h.j || x != h.i);) {
x = b ? Math.min(h.i, x) + 1 : x, w = j ? Math.min(h.j, w) + 1 : w, b = Math.abs(h.i - x), j = Math.abs(h.j - w);
var M = (w - 1) * o.option.matrix[1] + x,
y = o.mapperFunc(M) || M; - 1 == l.indexOf(y) && (t(s[M - 1]).addClass("hovered"), l.push(y))
}
v = [], h.j - g.j > 0 ? v.push("s") : h.j - g.j < 0 ? v.push("n") : 0, h.i - g.i > 0 ? v.push("e") : h.i - g.i < 0 ? v.push("w") : 0, v = v.join("-")
}
m.addClass("hovered"), l.push(c);
var P = o.option.margin,
k = o.option.radius,
C = (h.i - 1) * (2 * P + 2 * k) + 2 * P + k,
O = (h.j - 1) * (2 * P + 2 * k) + 2 * P + k;
if(1 != l.length) {
var D = i(o.lineX1, C, o.lineY1, O);
o.line.css({
width: D.length + 10 + "px",
transform: "rotate(" + D.angle + "deg)"
}), d || o.line.show()
}
v && (o.lastElm.addClass(v + " dir"), o.line.addClass(v + " dir"));
var E = t('<div style="top:' + (O - 5) + "px; left:" + (C - 5) + 'px"></div>');
o.line = E, o.lineX1 = C, o.lineY1 = O, o.holder.append(E), d || o.line.hide(), o.lastElm = m
}
o.lastPosObj = h
}
},
u = function(t, e) {
t.preventDefault();
var n = p[e.token],
a = n.patternAry.join("");
n.holder.off(".pattern-move").removeClass("patt-hidden"), a && (n.option.onDraw(a), n.line.remove(), n.rightPattern && (a == n.rightPattern ? n.onSuccess() : (n.onError(), e.error())))
};
o.prototype = {
constructor: o,
getIdxFromPoint: function(t, e) {
var n = this.option,
a = n.matrix,
r = t - this.wrapLeft,
i = e - this.wrapTop,
o = null,
s = n.margin,
l = 2 * n.radius + 2 * s,
p = Math.ceil(r / l),
d = Math.ceil(i / l),
h = r % l,
u = i % l;
return p <= a[1] && d <= a[0] && h > 2 * s && u > 2 * s && (o = (d - 1) * a[1] + p), {
idx: o,
i: p,
j: d,
x: r,
y: i
}
}
}, s.prototype = {
constructor: s,
option: function(t, e) {
var n = p[this.token],
i = n.option;
return e === a ? i[t] : (i[t] = e, void(("margin" == t || "matrix" == t || "radius" == t) && r(n)))
},
getPattern: function() {
return p[this.token].patternAry.join("")
},
setPattern: function(t) {
var e = p[this.token],
n = e.option,
a = n.matrix,
r = n.margin,
i = n.radius;
if(n.enableSetPattern) {
this.reset(), e.wrapLeft = 0, e.wrapTop = 0;
for(var o = 0; o < t.length; o++) {
var s = t[o] - 1,
d = s % a[1],
u = Math.floor(s / a[1]),
c = d * (2 * r + 2 * i) + 2 * r + i,
f = u * (2 * r + 2 * i) + 2 * r + i;
h.call(null, {
pageX: c,
pageY: f,
preventDefault: l,
originalEvent: {
touches: [{
pageX: c,
pageY: f
}]
}
}, this)
}
}
},
enable: function() {
var t = p[this.token];
t.disabled = !1
},
disable: function() {
var t = p[this.token];
t.disabled = !0
},
reset: function() {
var t = p[this.token];
t.pattCircle.removeClass("hovered dir s n w e s-w s-e n-w n-e"), t.holder.find(".patt-lines").remove(), t.patternAry = [], t.lastPosObj = null, t.holder.removeClass("patt-error patt-success")
},
error: function() {
p[this.token].holder.addClass("patt-error")
},
checkForPattern: function(t, e, n) {
var a = p[this.token];
a.rightPattern = t, a.onSuccess = e || l, a.onError = n || l
}
}, s.defaults = {
matrix: [3, 3],
margin: 20,
radius: 25,
patternVisible: !0,
lineOnMove: !0,
enableSetPattern: !1
}, e.PatternLock = s
}(jQuery, window, document);
那么本期分享就到这里，我们下期再见
添加微信咨询
获取课程资料+免费试听，体验强师课程！
微信号：ntk******88
-
南通UI设计培训 学历低 学完好就业吗？
知识点
-
南通JAVA培训课程体系
知识点
-
南通C4D培训学完都可以做什么
知识点
-
南通软件开发培训需要学什么？
知识点
-
南通Java培训入门知识准备
知识点
相关资料
“南通科迅教育”是南通科迅计算机技术服务有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。
相关课程
-
![]()
JavaEE+分布式开发培训班
￥8800
-
![]()
H5/web前端全栈开发培训班
￥8800
-
![]()
全链路UI/UE交互设计培训班
￥1800
-
![]()
室内全案设计培训班
￥1800
-
![]()
CNC数控编程培训班
￥1800
在线咨询
申请优惠
预约试听
返回顶部