黑马程序员技术交流社区

标题: 【广州前端】jquery手势密码插件 [打印本页]
作者: 老哥哥    时间: 2017-12-21 15:58
标题: 【广州前端】jquery手势密码插件
本帖最后由 老哥哥 于 2017-12-21 17:40 编辑

jquery 手势密码插件




演示地址：http://www.jq22.com/yanshi10471
插件描述：类似微信的手势密码解锁
基本配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#gesturepwd").GesturePasswd({
    backgroundColor: "#252736",
    //背景色
    color: "#FFFFFF",
    //主要的控件颜色
    roundRadii: 25,
    //大圆点的半径
    pointRadii: 6,
    //大圆点被选中时显示的圆心的半径
    space: 30,
    //大圆点之间的间隙
    width: 240,
    //整个组件的宽度
    height: 240,
    //整个组件的高度
    lineColor: "#00aec7",
    //用户划出线条的颜色
    zindex: 100 //整个组件的css z-index属性
});
密码解锁使用数字，数字对应路线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#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");
        //密码验证错误后的其他操作。。。
    }
});

更多前端资源敬请关注

手势密码插件.rar

64.88 KB, 下载次数: 133



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2