项目简介

最近参加了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移动端手势密码组件的更多相关文章

  1. h5手势密码开发(使用jq)

    直接上代码: 目录结构: 本次开用到的技术jq,以及引入的jq插件jquery.gesture.password.min.js index.html <!DOCTYPE html> < ...

  2. React Hooks Typescript 开发的一款 H5 移动端 组件库

    CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...

  3. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  4. jQuery之手势密码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 28.【转载】挖洞技巧：APP手势密码绕过思路总结

    说到APP手势密码绕过的问题,大家可能有些从来没接触过,或者接触过,但是思路也就停留在那几个点上,这里我总结了我这1年来白帽子生涯当中所挖掘的关于这方面的思路,有些是网上已经有的,有些是我自己不断摸索 ...

  6. APP手势密码绕过

    之前写的文章收到了很多的好评,主要就是帮助到了大家学习到了新的思路.自从发布了第一篇文章,我就开始筹备第二篇文章了,最终打算在07v8首发,这篇文章我可以保障大家能够学习到很多思路.之前想准备例子视频 ...

  7. vue项目中实现手势密码

    思路: 本来应该全部都用canvas来实现的,但时间紧迫 写的时候只想着圆圈用li写,线用canvas,写到一半才想通,还好这一通下来比较顺利 第一步:页面中的9个点用v-for循环出来li,ul设置 ...

  8. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  9. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

随机推荐

  1. Scala 面向对象（十二）：嵌套类

    在Scala中,你几乎可以在任何语法结构中内嵌任何语法结构.如在类中可以再定义一个类,这样的类是嵌套类,其他语法结构也是一样. 嵌套类类似于Java中的内部类. Scala嵌套类的使用1 请编写程序, ...

  2. java 面向对象（九）：类的结构：构造器（一）简介；属性赋值顺序；JavaBean的概念

    1.构造器(或构造方法):Constructor构造器的作用: * 1.创建对象 * 2.初始化对象的信息2.使用说明: * 1.如果没显式的定义类的构造器的话,则系统默认提供一个空参的构造器 * 2 ...

  3. 机器学习实战基础（十四）：sklearn中的数据预处理和特征工程（七）特征选择 之 Filter过滤法（一） 方差过滤

    Filter过滤法 过滤方法通常用作预处理步骤,特征选择完全独立于任何机器学习算法.它是根据各种统计检验中的分数以及相关性的各项指标来选择特征 1 方差过滤 1.1 VarianceThreshold ...

  4. SonarQube+Jenkins+Cppcheck实现C++代码扫描

    背景:公司部分项目是由C++进行开发,因此对此有需求. sonarqube:docker化安装(alpine系统),版本8.3.1 (build 34397) jenkins:docker化安装,版本 ...

  5. Ant-Design-Vue中关于Form组件的使用

    1.创建form表单的两种方式,不同的方式在js中创建表单的方式也不同 方式1:一般使用在搜索表单中,只需要双向绑定数据即可,那就使用这种方法即可 <template> <a-for ...

  6. linux管理防火墙

    操作系统环境:CentOS Linux release 7.0.1406(Core) 64位CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭f ...

  7. javascript兼容问题 : let降级到var 遇到的闭包问题的解决方法

    我用  for(let x in y) 循环一个图片元素数组. for (let x in arr) { arr[x].onload = function(){ /* ... */ } } 这样写是没 ...

  8. 搭建高可用kubernetes集群(keepalived+haproxy)

    序 由于单master节点的kubernetes集群,存在master节点异常之后无法继续使用的缺陷.本文参考网管流程搭建一套多master节点负载均衡的kubernetes集群.官网给出了两种拓扑结 ...

  9. 循序渐进nginx(一)：介绍、安装、hello world、Location匹配

    目录 前言: Nginx是什么 使用场景: 官方文档说明 安装 windows下: linux(CentOS7)下: docker下: 目录结构 Hello World 1.展示一下默认的核心配置: ...

  10. jenkins集群（三） -- master和slave配置git

    一.Linux(master)上安装git 1.运行命令:yum -y install git 2.git的默认安装目录是:  二.给Linux下Git配置好秘钥(公钥 + 私钥) 1.添加用户和密码 ...