jQuery实现手势解锁密码特效
程序员文章站
2022-05-26 08:10:16
本文实例为大家分享了jquery实现手势解锁密码的具体代码,供大家参考,具体内容如下
效果预览图:
验证成功:(可以进行页面挑战等...)
验证失败:
&n...
本文实例为大家分享了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: JS获取子、父、兄节点方法小结