本文实例为大家分享了jQuery实现手势解锁密码的具体代码，供大家参考，具体内容如下

效果预览图：

验证成功：（可以进行页面挑战等...）

验证失败：

 HTML：

<div id="gesturepwd" style="position: absolute;width:440px;height:440px;left:50%;top:50%;
margin-left:-220px;margin-top:-220px"></div>

首次渲染：

$("#gesturepwd").GesturePasswd({
  margin:"0px auto",
  backgroundColor:"#252736", //背景色
  color:"#FFFFFF", //主要的控件颜色
  roundRadii:42, //大圆点的半径
  pointRadii:6, //大圆点被选中时显示的圆心的半径
  space:60, //大圆点之间的间隙
  width:440, //整个组件的宽度
  height:440, //整个组件的高度
  lineColor:"#00aec7", //用户划出线条的颜色
  zindex :100 //整个组件的css z-index属性
 })

密码判断代码：(这里的密码“34569”意思为页面上从上到下，从左到右的9个原点中的5个点)

$("#gesturepwd").on("hasPasswd",function(e,passwd){
  var result;
  if(passwd == "34569"){//密码设置处
   result=true;
  } else {
   alert("密码错误!");
   result=false;
  }
  if(result == true){
   $("#gesturepwd").trigger("passwdRight");
   setTimeout(function(){
   //密码验证正确后的其他操作，打开新的页面等。。。
    //alert("密码正确！")
    //window.location.href="../统计图/index.html";
    alert("验证通过!");


   },500); //延迟半秒以照顾视觉效果
  }
  else{
   $("#gesturepwd").trigger("passwdWrong");
   //密码验证错误后的其他操作。。。
  }
 })

核心脚本调用展示(这里有兴趣的话可以仔细研究下...)：

;
(function ($) {


 var GesturePasswd= function (element, options) {
  this.$element = $(element);
  this.options = options;
  var that=this;
  this.pr=options.pointRadii;
  this.rr=options.roundRadii;
  this.o=options.space;
  this.color=options.color;
  //全局样式
  this.$element.css({
   "position":"relation",
   "width":this.options.width,
   "height":this.options.height,
   "background-color":options.backgroundColor,
   "overflow":"hidden",
   "cursor":"default"
  });


  //选择器规范
  if(! $(element).attr("id"))
   $(element).attr("id",(Math.random()*65535).toString());
  this.id="#"+$(element).attr("id");



  var Point = function (x,y){
   this.x =x;this.y=y
  };

  this.result="";
  this.pList=[];
  this.sList=[];
  this.tP=new Point(0,0);


  this.$element.append('<canvas class="main-c" width="'+options.width+'" height="'+options.height+'" >');
  //this.$element.append('<canvas class="main-p" width="'+options.width+'" height="'+options.height+'" >');
  this.$c= $(this.id+" .main-c")[0];
  this.$ctx=this.$c.getContext('2d');




  this.initDraw=function(){
   this.$ctx.strokeStyle=this.color;
   this.$ctx.lineWidth=2;
   for(var j=0; j<3;j++ ){
    for(var i =0;i<3;i++){
     this.$ctx.moveTo(this.o/2+this.rr*2+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
     this.$ctx.arc(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr),this.rr,0,2*Math.PI);
     var tem=new Point(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
     if (that.pList.length < 9)
      this.pList.push(tem);
    }
   }
   this.$ctx.stroke();
   this.initImg=this.$ctx.getImageData(0,0,this.options.width,this.options.height);
  };
  this.initDraw();
  //this.$ctx.stroke();
  this.isIn=function(x,y){

   for (var p in that.pList){
    //console.log(that.pList[p][x]);
    // console.log(( Math.pow((x-that.pList[p][x]),2)+Math.pow((y-that.pList[p][y]),2)));
    if(( Math.pow((x-that.pList[p]["x"]),2)+Math.pow((y-that.pList[p]["y"]),2) ) < Math.pow(this.rr,2)){
     return that.pList[p];
    }
   }
   return 0;
  };

  this.pointDraw =function(c){
   if (arguments.length>0){
    that.$ctx.strokeStyle=c;
    that.$ctx.fillStyle=c;
   }
   for (var p in that.sList){
    that.$ctx.moveTo(that.sList[p]["x"]+that.pr,that.sList[p]["y"]);
    that.$ctx.arc(that.sList[p]["x"],that.sList[p]["y"],that.pr,0,2*Math.PI);
    that.$ctx.fill();
   }
  };
  this.lineDraw=function (c){
   if (arguments.length>0){
    that.$ctx.strokeStyle=c;
    that.$ctx.fillStyle=c;
   }
   if(that.sList.length > 0){
    for( var p in that.sList){
     if(p == 0){
      console.log(that.sList[p]["x"],that.sList[p]["y"]);
      that.$ctx.moveTo(that.sList[p]["x"],that.sList[p]["y"]);
      continue;
     }
     that.$ctx.lineTo(that.sList[p]["x"],that.sList[p]["y"]);
     console.log(that.sList[p]["x"],that.sList[p]["y"]);
    }

   }
  };

  this.allDraw =function(c){
   if (arguments.length>0){
    this.pointDraw(c);
    this.lineDraw(c);
    that.$ctx.stroke();
   }
   else {
    this.pointDraw();
    this.lineDraw();
   }

  };


  this.draw=function(x,y){
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   //that.initDraw();
   that.$ctx.putImageData(this.initImg,0,0);
   that.$ctx.lineWidth=4;
   that.pointDraw(that.options.lineColor);
   that.lineDraw(that.options.lineColor);
   that.$ctx.lineTo(x,y);
   that.$ctx.stroke();
  };



  this.pointInList=function(poi,list){
   for (var p in list){
    if( poi["x"] == list[p]["x"] && poi["y"] == list[p]["y"]){
     return ++p;
    }
   }
   return false;
  };

  this.touched=false;
  $(this.id).on ("mousedown touchstart",{that:that},function(e){
   e.data.that.touched=true;
  });
  $(this.id).on ("mouseup touchend",{that:that},function(e){
   e.data.that.touched=false;
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(e.data.that.initImg,0,0);
   that.allDraw(that.options.lineColor);
   // that.$ctx.stroke();
   for(var p in that.sList){
    if(e.data.that.pointInList(that.sList[p], e.data.that.pList)){
     e.data.that.result= e.data.that.result+(e.data.that.pointInList(that.sList[p], e.data.that.pList)).toString();
    }
   }
   $(element).trigger("hasPasswd",that.result);
  });

  //
  $(this.id).on('touchmove mousemove',{that:that}, function(e) {
   if(e.data.that.touched){
    var x= e.pageX || e.originalEvent.targetTouches[0].pageX ;
    var y = e.pageY || e.originalEvent.targetTouches[0].pageY;
    x=x-that.$element.offset().left;
    y=y-that.$element.offset().top;
    var p = e.data.that.isIn(x, y);
    console.log(x)
    if(p != 0 ){
     if ( !e.data.that.pointInList(p,e.data.that.sList)){
      e.data.that.sList.push(p);
     }
    }
    console.log( e.data.that.sList);
    e.data.that.draw(x, y);
   }

  });



  $(this.id).on('passwdWrong',{that:that}, function(e) {
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(that.initImg,0,0);
   that.allDraw("#cc1c21");
   that.result="";
   that.pList=[];
   that.sList=[];

   setTimeout(function(){
    that.$ctx.clearRect(0,0,that.options.width,that.options.height);
    that.$ctx.beginPath();
    that.initDraw()
   },500)

  });


  $(this.id).on('passwdRight',{that:that}, function(e) {
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(that.initImg,0,0);
   that.allDraw("#00a254");
   that.result="";
   that.pList=[];
   that.sList=[];
   setTimeout(function(){
    that.$ctx.clearRect(0,0,that.options.width,that.options.height);
    that.$ctx.beginPath();
    that.initDraw()
   },500)
  });


 };


 GesturePasswd.DEFAULTS = {
  zindex :100,
  roundRadii:25,
  pointRadii:6,
  space:30,
  width:240,
  height:240,
  lineColor:"#00aec7",
  backgroundColor:"#252736",
  color:"#FFFFFF"
 };




//代码整理：懒人之家 www.lanrenzhijia.com



 function Plugin(option,arg) {
  return this.each(function () {
   var $this = $(this);
   var options = $.extend({}, GesturePasswd.DEFAULTS, typeof option == 'object' && option);
   var data = $this.data('GesturePasswd');
   var action = typeof option == 'string' ? option : NaN;
   if (!data) $this.data('danmu', (data = new GesturePasswd(this, options)));
   if (action) data[action](arg);
  })
 }


 $.fn.GesturePasswd    = Plugin;
 $.fn.GesturePasswd.Constructor = GesturePasswd;



})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery手势解锁  # jQuery手势解锁密码  # jQuery解锁密码  # jquery 手势密码插件  # 圆点  # 首次  # 之家  # 有兴趣  # 大家分享  # 具体内容  # 大家多多  # 解锁  # 背景色  # 开新  # 从上到下  # 统计图  # 选择器  # var  # index  # passwd  # function  # hasPasswd  # 左到右  # lineColor 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 大连网站制作公司哪家好一点,大连买房网站哪个好？  在线制作视频网站免费,都有哪些好的动漫网站？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  Laravel如何实现API资源集合？（Resource Collection教程）  Laravel Session怎么存储_Laravel Session驱动配置详解  长沙做网站要多少钱,长沙国安网络怎么样？  如何在局域网内绑定自建网站域名？  Laravel如何自定义错误页面（404, 500）？（代码示例）  php json中文编码为null的解决办法  如何在VPS电脑上快速搭建网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  Laravel如何使用Collections进行数据处理？（实用方法示例）  高端建站如何打造兼具美学与转化的品牌官网？  Firefox Developer Edition开发者版本入口  Android自定义listview布局实现上拉加载下拉刷新功能  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  如何在云主机上快速搭建网站？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  新三国志曹操传主线渭水交兵攻略  nginx修改上传文件大小限制的方法  制作电商网页,电商供应链怎么做？  如何在万网主机上快速搭建网站？  如何用PHP工具快速搭建高效网站？  如何用免费手机建站系统零基础打造专业网站？  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  如何确保FTP站点访问权限与数据传输安全？  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  高防服务器：AI智能防御DDoS攻击与数据安全保障  Laravel如何实现本地化和多语言支持？（i18n教程）  如何挑选高效建站主机与优质域名？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何在万网自助建站平台快速创建网站？  如何在云虚拟主机上快速搭建个人网站？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  如何快速搭建高效简练网站？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  网站建设保证美观性，需要考虑的几点问题！  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  Java类加载基本过程详细介绍  济南网站建设制作公司,室内设计网站一般都有哪些功能？  Laravel如何升级到最新版本？（升级指南和步骤）