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卸载全部事件的思路详解
Apr 03 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jquery轮播图插件使用方法详解
Jul 31 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使用eAccelerator的API开发详解
2013/06/09 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python 布尔操作实现代码
2013/03/23 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
《永远的白衣战士》教学反思
2014/04/25 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
教师年度考核个人总结
2015/02/12 职场文书
追悼会悼词大全
2015/06/23 职场文书