jQuery手机屏幕手势解锁代码

作者：科迅教育 2020年03月31日

今天我们来分享是一款用jquery实现的手机解锁界面，非常好看，下面我们先看图

我们先来看html部分代码：

<!DOCTYPE html>

<head>

<title>jQuery手机屏幕手势解锁代码 </title>

</head>

<body>

</div>

</div>

<span class="mhn-ui-page-title">All Application</span>

<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 class="mhn-ui-icon-title">Author</div>

</div>

<div class="mhn-ui-icon-title">Contact</div>

</div>

<div class="mhn-ui-icon-title">Portfolio</div>

</div>

<div class="mhn-ui-icon-title">Credits</div>

</div>

<div class="mhn-ui-icon-title">Facebook</div>

</div>

<div class="mhn-ui-icon-title">Twitter</div>

</div>

<div class="mhn-ui-icon-title">jQuery</div>

</div>

<div class="mhn-ui-icon-title">Ionicons</div>

</div>

<div class="mhn-ui-icon-title">Animate</div>

</div>

<div class="mhn-ui-icon-title">Unsplash</div>

</div>

<div class="mhn-ui-icon-title">patternLock</div>

</div>

</div>

<span class="ion-person"></span> Author</div>

</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>

<span class="ion-chatbox"></span> Contact</div>

</div>

<span class="ion-information-circled"></span> Credits</div>

<p>jQuery is a fast, small, and feature-rich JavaScript library.</p>

</div>

</div>

<p>This application wants to open an external link. To confirm, please click on yes button.</p>

</div>

<div class="mhn-ui-info">绘制'Z'形状开始解锁:)</div>

</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);

那么本期分享就到这里，我们下期再见