jQuery实现注册拼图滑块验证特效

jQuery实现注册拼图滑块验证特效

jQuery仿B站登录拼图滑块验证,最近研究了一个新的验证登录注册的代码,叫做极验验证滑动拼图代码。对它感兴趣是因为在b站看到了,觉得对页面的显示效果特别好,而且也很安全。

使用方法
引入相关JS代码文件

1
2
<script src="js/jquery.min.js"></script>
<script src="img_ver.js"></script>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
imgVer({
  el:'$("#imgVer")',
  width:'260',
  height:'116',
  img:[
      'images/ver.png',
      'images/ver-1.png',
      'images/ver-2.png',
      'images/ver-3.png'
  ],
  success:function () {
      //alert('执行登录函数');
      $(".login").css({
          "left":"0",
          "opacity":"1"
      });
      $(".verBox").css({
          "left":"404px",
          "opacity":"0"
      });
      $(".tips").html('你是不是不知道账号密码!???');
      $("#logo").attr("src",'images/login-err.png')
  },
  error:function () {
      //alert('错误什么都不执行')
  }
});
$(".submit").on('click',function () {
  if($(".username").val() == '') {
      // $(".err-username").html('杂种!!你用户名呢!???');
      $(".tips").html('老兄!!你用户名呢!???');
      $("#logo").attr("src",'images/null-username.jpg')
  } else if($(".password").val() == '') {
      // $(".err-password").html('畜生!!你密码呢!???');
      $(".tips").html('老兄!!你密码呢!???');
      $("#logo").attr("src",'images/null-password.jpg')
  } else {
      $(".login").css({
          "left":"-404px",
          "opacity":"0"
      });
      $(".verBox").css({
          "left":"0",
          "opacity":"1"
      })
  }
})
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论