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