素材牛VIP会员

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

 所属分类:网页特效-其他特效

 浏览:2602次  评论:2次  更新时间:2016-12-15
牛币素材VIP可免积分下载
jQuery手机图案划动密码解锁特效代码兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述: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>

相关素材 - 其他特效

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

华***n  
2017年10月13日

感谢作者分享

回复
qq***15  
2020年07月24日

赞你作者!!!

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)