jQuery实现手势解锁密码特效


Posted in jQuery onAugust 14, 2017

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

效果预览图:

验证成功:(可以进行页面挑战等...)

jQuery实现手势解锁密码特效

验证失败:

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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python把1变成01的步骤总结
2019/02/27 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
旅游管理专业学生求职信
2013/09/28 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
伊索寓言教学反思
2014/05/01 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
倡议书格式及范文
2015/04/29 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书