欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现手势解锁密码特效

程序员文章站 2022-05-26 08:10:16
本文实例为大家分享了jquery实现手势解锁密码的具体代码,供大家参考,具体内容如下 效果预览图: 验证成功:(可以进行页面挑战等...) 验证失败: &n...

本文实例为大家分享了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);

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