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.实现原理 ...
随机推荐
- .NET WEB API关键过程 思维导图
背景说明 近期在去面试的过程中,被问及有关WEB API的一些特性,一时竟不知该如何回答,故根据自己已知的知识,加上网上搜索的,详细列举了一下,期望对WEB API有一个比较开阔和全面的认知. 关键要 ...
- day8 for循环+基本数据类型(上)
目录 一 for循环 1 什么是for循环 2 为什么要有for循环 3 如何使用for循环 二 基本数据类型的内置方法 2 字符串 2.1 类型转化 2.2 内置方法(优先掌握) 2.2.1 按索引 ...
- Java 线程池中的线程复用是如何实现的?
前几天,技术群里有个群友问了一个关于线程池的问题,内容如图所示: 关于线程池相关知识可以先看下这篇:为什么阿里巴巴Java开发手册中强制要求线程池不允许使用Executors创建? 那么就来和大家探讨 ...
- java 面向对象(八):面向对象的特征一:封装性
面向对象的特征一:封装与隐藏1.为什么要引入封装性?我们程序设计追求“高内聚,低耦合”.高内聚 :类的内部数据操作细节自己完成,不允许外部干涉:低耦合 :仅对外暴露少量的方法用于使用. 隐藏对象内部的 ...
- 李航统计学习方法(第二版)(五):k 近邻算法简介
1 简介 k近邻法的输入为实例的特征向量,对应于特征空间的点;输出为实例的类别,可以取多类.k近邻法假设给定一个训练数据集,其中的实例类别已定.分类时,对新的实例,根据其k个最近邻的训练实例的类别,通 ...
- How to use the functions of apply and call
Although apply and call can implement same function. However, there is a litter different between ...
- 01-MySQL支持的数据类型
1.数值类型 整数类型 MySQL 支持的整数类型有 SQL 标准中的整数类型 INTEGER,SMALLINT,TINYINT.MEDIUMINT和BIGINT.其整数类型的特性如下表所示: 在上述 ...
- ajax根据坐标查询WMS地图服务属性信息
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- Ethical Hacking - NETWORK PENETRATION TESTING(24)
Detecting suspicious activities using Wireshark You can use make the MAC address of the router to st ...
- Java对象创建模式
创建Java对象时,对于可为空的属性,创建对象的时候有3种模式:重叠构造器模式.JavaBeans模式.Builder模式(推荐).Stream模式(推荐). ...