jQuery手势密码特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手势密码特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery手势密码特效</title>
</head>
<body>
<center><br><br>
正确的密码是一个字母“Z”的形状哦！<br><br><br>
<div id="gesturepwd"></div>
</center>
<script src="src/jquery-2.1.4.min.js"></script>
<script src="src/jquery.gesture.password.js"></script>

<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#252736",  //背景色
color:"#FFFFFF",   //主要的控件颜色
roundRadii:25,    //大圆点的半径
pointRadii:6, //大圆点被选中时显示的圆心的半径
space:30,  //大圆点之间的间隙
width:240,   //整个组件的宽度
height:240,  //整个组件的高度
lineColor:"#00aec7",   //用户划出线条的颜色
zindex :100  //整个组件的css z-index属性
});
$("#gesturepwd").on("hasPasswd",function(e,passwd){
var result;

if(passwd == "1235789"){

result=true;
}
else {
 result=false;
}
if(result == true){
  $("#gesturepwd").trigger("passwdRight");
  setTimeout(function(){

	//密码验证正确后的其他操作，打开新的页面等。。。
	alert("密码正确！")
  },500);  //延迟半秒以照顾视觉效果
}
else{
  $("#gesturepwd").trigger("passwdWrong");

  //密码验证错误后的其他操作。。。

}
});
</script>
</body>
</html>

JS代码(jquery.gesture.password.js):

;
	(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"}
;
	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);

附件:下载该文件资源,减少时间成本(增值服务)