基于jQuery的图片点击验证插件

 2750去下载

基于jQuery的图片点击验证插件,支持与后端交互。增加了关闭按钮,改变了刷新方式。


基于jQuery的图片点击验证插件


插件使用方法:

1、保证页面中有`jQuery.js`,再在页面引入`Image-verifie.css`和`Image-verifie.js`。

2、调用方法如下:

  1. $(function () {
  2.     test.init();
  3. })
  4. var test = {
  5.     param: {
  6.         lang: 'en-us',//en-us和zh-cn,为空时默认是中文
  7.         key: '',
  8.         imgArr: []
  9.     },
  10.     init: function () {
  11.         $("#open").click(function () {
  12.             //模拟调用接口获取关键词和图片
  13.             var key = '树木';
  14.             var imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/7.jpg', './img/8.jpg', './img/9.jpg'];
  15.             test.param.key = key;
  16.             test.param.imgArr = imgArr;
  17.             //初始化,四个个参数({key,imgArr},successFuc,refreshFuc,[lang])
  18.             imageVerify.init({
  19.                 'key': test.param.key,
  20.                 'imgArr': test.param.imgArr
  21.             }, function (res) {//点击确定按钮的事件
  22.                 //获取到选中的图片下标
  23.                 var choose = res.choose;
  24.                 // //模拟验证成功...
  25.                 // imageVerify.close();
  26.                 //模拟验证失败...
  27.                 imageVerify.showErrorMsg();
  28.                 return false;
  29.             }, test.Refresh, test.param.lang);//包含"zh-cn"和"en-us"两种语言,默认是"zh-cn"
  30.         });
  31.     },
  32.     Refresh: function () {
  33.         //模拟调用接口获取关键词和图片
  34.         var key = '汽车';
  35.         var imgArr = shuffle(test.param.imgArr);
  36.         test.param.key = key;
  37.         test.param.imgArr = imgArr;
  38.         imageVerify.refresh(test.param);
  39.     }
  40. }
  41. //随机打乱数组
  42. function shuffle(a) {
  43.     var len = a.length;
  44.     for (var i = 0; i < len; i++) {
  45.         var end = len - 1;
  46.         var index = (Math.random() * (end + 1)) >> 0;
  47.         var t = a[end];
  48.         a[end] = a[index];
  49.         a[index] = t;
  50.     }
  51.     return a;
  52. };

后端交互

1、在调用imageVerifie.init方法之前,调用后端接口,获取到当前验证的关键词key和图片地址imgArr

2、刷新事件,同样是调用后端接口获取关键词和图片地址。

3、确定事件,调用后端接口,将选中的图片下标发送给后端,进行判断。


本文网址:https://www.zztuku.com/detail-12883.html
转载请声明来自:站长图库 - 基于jQuery的图片点击验证插件


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢