项目简介

最近参加了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. Linux多任务编程之三：exec函数族及其基础实验（转）

    来源:CSDN  作者:王文松  转自:Linux公社 exec函数族 函数族说明 fork() 函数用于创建一个新的子进程,该子进程几乎复制了父进程的全部内容,但是,这个新创建的子进程如何执行呢?e ...

  2. flask 源码专题（五）：SqlAlchemy 中操作数据库时session和scoped_session的区别

    1原生session: from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalc ...

  3. celery 基础教程（三）：配置

    前言 如果你使用默认的加载器,你必须创建 celeryconfig.py 模块并且保证它在python路径中. 一.加载配置方法  1.基础方法  可以设置一些选项来改变 Celery 的工作方式.这 ...

  4. 数据可视化之powerBI基础（三）编辑交互，体验更灵活的PowerBI可视化

    https://zhuanlan.zhihu.com/p/64412190 PowerBI可视化与传统图表的一大区别,就是可视化分析是动态的,通过页面上筛选.钻取.突出显示等交互功能,可以快速进行访问 ...

  5. 阻止 iPhone 视频自动全屏

    最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...

  6. 重学c#系列——c# 托管和非托管资源(三)

    前言 c# 托管和非托管比较重要,因为这涉及到资源的释放. 现在只要在计算机上运行的,无论玩出什么花来,整个什么概念,逃不过输入数据修改数据输出数据(计算机本质),这里面有个数据的输入,那么我们的内存 ...

  7. （4）webpack中配置css，scss，less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  8. Go Pentester - TCP Proxy

    Building a TCP Proxy Using io.Reader and io.Writer Essentially all input/output(I/O). package main i ...

  9. ATX 学习 (四)-atxserver2

    ATXSERVER2 一.main()文件启动 1.首先通过parse_args返回一个Namespace作一些配置,登录页html在SimpleLoginHandler这个里边写着,2.接着通过db ...

  10. Angular 的前世今生

    目录 序言 AngularJS 简介 Angular 2.0 的动机 现如今的 Angular Angular 的核心概念 参考 序言 Angular 一般意义上是指 Angular v2 及以上版本 ...