jQuery仿手机手势密码特效插件

使用方法：

我觉得这个可以用作网站验证码，防机器注入。

引入jQuery库文件、插件JS文件

<script src="jquery-2.1.4.min.js"></script>
<script src="src/jquery.gesture.password.js"></scrip

基本配置

$("#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");
        //密码验证错误后的其他操作。。。
    }
});

HTML结构

<div id="gesturepwd"></div>