H5移动端手势密码组件
项目简介
最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~
本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和验证。
先加星后看,年薪百万!欢迎大家关注我的github,互相学习~~
demo演示地址:http://tangzhirong.github.io/lock/example/demo.html
项目github地址:https://github.com/tangzhirong/mobile-lock
我的github地址:https://github.com/tangzhirong
效果




特点
- 移动端不同尺寸设备适配:采用css media query和rem设置字体大小
- 支持自定义参数:手势区大小、标题等
- 解决部分安卓手机touch事件兼容性问题
推荐文章
想要了解如何做H5移动端开发的朋友,推荐两篇我认为写的不错的文章,以供参考:
H5移动端适配相关文章:http://www.mamicode.com/info-detail-864013.html
H5移动端兼容性相关文章:http://www.cnblogs.com/shenjp/p/6517525.html
H5移动端手势密码组件的更多相关文章
- h5手势密码开发(使用jq)
直接上代码: 目录结构: 本次开用到的技术jq,以及引入的jq插件jquery.gesture.password.min.js index.html <!DOCTYPE html> < ...
- React Hooks Typescript 开发的一款 H5 移动端 组件库
CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- jQuery之手势密码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 28.【转载】挖洞技巧:APP手势密码绕过思路总结
说到APP手势密码绕过的问题,大家可能有些从来没接触过,或者接触过,但是思路也就停留在那几个点上,这里我总结了我这1年来白帽子生涯当中所挖掘的关于这方面的思路,有些是网上已经有的,有些是我自己不断摸索 ...
- APP手势密码绕过
之前写的文章收到了很多的好评,主要就是帮助到了大家学习到了新的思路.自从发布了第一篇文章,我就开始筹备第二篇文章了,最终打算在07v8首发,这篇文章我可以保障大家能够学习到很多思路.之前想准备例子视频 ...
- vue项目中实现手势密码
思路: 本来应该全部都用canvas来实现的,但时间紧迫 写的时候只想着圆圈用li写,线用canvas,写到一半才想通,还好这一通下来比较顺利 第一步:页面中的9个点用v-for循环出来li,ul设置 ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
随机推荐
- electron自定义最小化,最大化和关闭按钮
Electron ipcRenderer 模块 ipcRenderer 模块是一个 EventEmitter 类的实例. 它提供了有限的方法,你可以从渲染进程向主进程发送同步或异步消息. 也可以收到主 ...
- mysql解压缩版安装和卸载
所有的cmd命令都是在管理员模式下输入 官方下载网址:https://dev.mysql.com/downloads/mysql/ 安装mysql mysqld install //安装mysql:卸 ...
- java 面向对象(三十六):泛型五 通配符
1.通配符的使用 /* 通配符的使用 通配符:? 类A是类B的父类,G<A>和G<B>是没关系的,二者共同的父类是:G<?> */ @Test public voi ...
- scrapy 源码解析 (四):启动流程源码分析(四) Scheduler调度器
Scheduler调度器 对ExecutionEngine执行引擎篇出现的Scheduler进行展开.Scheduler用于控制Request对象的存储和获取,并提供了过滤重复Request的功能. ...
- hihoCoder 1051 补提交卡 最详细的解题报告
题目来源:补提交卡 解题思路:假设未提交程序的天数为:a1,a2,....,an,补交的张数为M.依次从a1,a2,....,an中去掉连续的 K 天(0<=K<=M),然后再来计算剩余数 ...
- Quartz.Net系列(十六):通过Plugins模式使用Xml方式配置Job和Trigger和自定义LogPrivider
1.简单介绍 Quarz.Net中采用插件式来实现配置文件配置,通过XMLSchedulingDataProcessor类进行Xml数据处理 默认配置文件命名:quart_jobs.xml publi ...
- Java8之Stream 集合聚合操作集锦(含日常练习Demo)
Stream 是用函数式编程方式在集合类上进行复杂操作的工具,其集成了Java 8中的众多新特性之一的聚合操作,开发者可以更容易地使用Lambda表达式,并且更方便地实现对集合的查找.遍历.过滤以及常 ...
- IDEA 导入maven 项目,出现报错,不能运行之类的
选择pom.xml,右键选择 Add as Maven Project
- pom.xml文件中的parent标签
基本概念 maven的核心就算pom.xm,使用maven是为了更好地帮项目管理包依赖.如果要引入一个jar包,需要在pom文件中加上 <dependency> <groupId&g ...
- idea 自动生成try/catch代码块的快捷键
好像每个人的快捷键可能不同:我的是 Alt+Shift+Z 网上查的是 Ctrl+Alt+T 如果都不是可以点选工具栏生成try/catch(并可查看到自己的快捷键是什么):Code->Su ...