web前端学习干货分享：jQuery手机屏幕手势解锁代码

最新推荐文章于 2024-06-25 09:44:25 发布
最新推荐文章于 2024-06-25 09:44:25 发布
阅读量434 收藏
点赞数
分类专栏： IT 文章标签： 南通web前端培训 南通IT培训 南通软件开发培训 南通java培训
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kexunjiaoyu_IT/article/details/89918313
版权
本文介绍了一款使用jQuery编写的手机解锁界面，包括HTML和CSS代码。解锁界面包含日期时间显示、自定义图标和动画效果，提供了一个交互式的解锁体验。通过绘制特定图案来解锁，支持多种布局和样式定制。
摘要由CSDN通过智能技术生成

今天我们来分享是一款用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</

最低0.47元/天 解锁文章
科迅教育
关注
专栏目录
原生javascript-手势解锁
liuhao9999的博客
10-27 539
思路： 效果： <html> <head> <style> * { margin: 0px; padding: 0px; user-select: none; } canvas { cursor: pointer; width: 3...
web前端干货分享：jquery实现夹娃娃效果
kexunjiaoyu_IT的博客
05-07 1001
今天老师为大家分享一款由jquery实现的夹娃娃效果，如图所示： 这个比较简单，需要使用的代码也很简单：下面放出html代码图： 接下来放出css代码 #wrapper { width: 750px; height: 1109px; margin: 0 auto; background-image: url(‘img/bg.png’); position: relative; z-index: ...
HTML5实现屏幕手势解锁代码包
08-22
实现原理 利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。
用 canvas 实现 Web 手势解锁
weixin_34301132的博客
04-01 234
最近参加 360 暑假的前端星计划，有一个在线作业，截止日期是 3 月 30 号，让手动实现一个 H5 手势解锁，具体的效果就像原生手机的九宫格解锁那样。 实现的最终效果就像下面这张图这样： 基本要求是这样的：将密码保存到 localStorage 里，开始的时候会从本地读取密码，如果没有就让用户设置密码，密码最少为五位数，少于五位要...
发现新星：Pattern Lock JS —— 引领现代Web应用安全新篇章
最新发布
gitblog_00049的博客
06-25 1038
???? 发现新星：Pattern Lock JS —— 引领现代Web应用安全新篇章 pattern-lock-jsAn android inspired pattern lock in scalable vector graphics and pure javascript项目地址:https://gitcode.com/gh_mirrors/pa/pattern-lock-js 在数字时代，我们...
手势解锁功能
Yetian_2000的博客
09-10 208
手势解锁前端编写思路：添加链接描述 https://www.cnblogs.com/cleven/p/5374429.html
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
软件开发-前端开发-IT
10-11 2873
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 一、基础知识 1.用法 <video src="./video/mv.mp4"></video> 注意：audio和video元素必须同时包含开始和结束标签，不能使用 2.重要HTML属性 control...
web前端入门到实战：实现图形验证码
软件开发-前端开发-IT
09-20 4466
什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力...
web前端期末大作业：红色主题中国文化网页设计与实现——基于HTML+CSS实现中国梦(20页)
专注于dreamweaver网页设计制作
08-11 2377
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒......
web前端入门到实战：边框属性（下）、边框练习
软件开发-前端开发-IT
10-08 1393
一、边框属性 1.连写（分别设置四条边的边框） border-width:上 右 下 左； border-style:上 右 下 左； border-color:上 右 下 左； 注意点： （1）这三个属性是按照顺时针来赋值的，也就是说按照上右下左来赋值，而不是按照日常生活中的上下左右 （2）关于省略 i.三个（省略左）左右一样，上下按照咱们写的 ii.两个（省略左、下）左右一样，上下一样...
手势解锁小程序
06-27
手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。
web页面九宫格手势密码（仿手机九宫格锁屏）
01-22
公司是做移动端的,前段时间要求我们后端开发人员给做一个和移动端一样的九宫格锁屏方式的进入密码,在网上查找资料也没有什么可以用的,写完后上传上来,大家可以分享
手势解锁微信小程序源码
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
超清晰html 手势密码
12-19
基于css3、H5+、原生js的手势密码，解决了适配到手机后模糊的问题。欢迎大家评论区讨论，如有问题，我将尽快回复。
HTML5实现屏幕手势解锁
www.hohode.com
07-18 1959
http://www.alloyteam.com/2015/07/html5-shi-xian-ping-mu-shou-shi-jie-suo/
推荐开源项目：H5HandLock - 手势解锁的HTML5实现
gitblog_00084的博客
04-24 373
推荐开源项目：H5HandLock - 手势解锁的HTML5实现 项目地址:https://gitcode.com/songjinzhong/H5HandLock 项目简介 H5HandLock 是一个基于HTML5、CSS3和JavaScript实现的轻量级手势解锁组件。该项目由宋金钟开发，旨在为Web应用提供一种与原生应用类似的用户体验，让用户通过自定义手势进行安全解锁或授权。 技术分析 HT...
H5实现屏幕手势解锁
weixin_30586085的博客
03-16 222
http://www.nihaoshijie.com.cn/index.php/archives/537 转载于:https://www.cnblogs.com/zhangjingyun/p/5282376.html
移动H5手势密码解锁插件--demo
China_Guanq的博客
08-17 2744
“”下面“”备注： 此实例应用于移动H5端，手势密码解锁的功能。实例针对不同大小的移动设备做了相应解锁屏幕的大小尺寸。 密码设置为一个 Z。需要使用手势解锁的移动前端的童鞋们，希望能帮助到。附件Demo: http://download.csdn.net/download/china_guanq/9937714
前端干货：JS常用函数与Ajax、Jsonp封装实践
"这篇资源是关于JavaScript编程中的常用函数、技巧和实践经验的总结，特别提到了Ajax请求的实现，包括jQuery的ajax函数封装以及JSONP的处理...通过学习和应用这些内容，可以帮助开发者更高效地编写代码，解决实际问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值