jQuery手机图案划动密码解锁特效代码

使用方法：

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

<script src="script/jquery.min.js"></script>
<script src="script/jquery.raphael.gpwd.min.js"></script>

插件初始化、参数配置（其他配置看注释）

$(function() {
    // 密码字典(3x3矩阵请提供长度为9的字典 4x4为16 以此类推)
    var dict = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
    // 初始化
    var gpwd = $.GPWD('content', function(arr) {
        var password = '';
        $.each(arr, function(i, v) {
            password += dict[v];
        });
        // 得到密码后可以进行自定义操作
        $('#password').text(password);
    }, {matrix: 4, mindig: 4});
    
    /*
     * 控件使用
     * $.GPWD(id, callback(arr), settting(可选));
     * 
     * 参数说明
     * settting = {
     *   matrix: num(矩阵大小),
     *   mindig: num(最小连线数),
     *   其他参数调整中(包括样式 颜色 线条粗线)
     * }
     * 
     * 其他方法
     * var gpwd = $.GPWD(...);
     * gpwd.reset(); 重置手势密码
     * gpwd.error(); 标识连线错误
     * gpwd.unload() 卸载手势密码
     */
});

HTML结构

<div id="content"></div>
<div id="password"></div>