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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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 UBB 解析实现代码
2011/11/27 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python实现雨滴下落到地面效果
2018/06/21 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python实现一个论文下载器的过程
2021/01/18 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android