验证码之滑动拼图

1、效果图

2、下载js、css文件

3、html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>滑动拼图验证码</title>
 6   <link rel="stylesheet" href="jigsaw.css">
 7   <style>
 8     .container {
 9       width: 310px;
10       margin: 100px auto;
11     }
12     input {
13       display: block;
14       width: 290px;
15       line-height: 40px;
16       margin: 10px 0;
17       padding: 0 10px;
18       outline: none;
19       border:1px solid #c8cccf;
20       border-radius: 4px;
21       color:#6a6f77;
22     }
23     #msg {
24       width: 100%;
25       line-height: 40px;
26       font-size: 14px;
27       text-align: center;
28     }
29     a:link,a:visited,a:hover,a:active {
30       margin-left: 100px;
31       color: #0366D6;
32     }
33 
34   </style>
35 </head>
36 <body>
37 <div class="container">
38   <input value="admin" readonly/>
39   <input type="password" value="1234567890" readonly/>
40   <div id="captcha" style="position: relative"></div>
41   <div id="msg"></div>
42 </div>
43 <script src="jigsaw.js"></script>
44 <script>
45   jigsaw.init(document.getElementById('captcha'), function () {
46     document.getElementById('msg').innerHTML = '登录成功！'
47   })
48 </script>
49 </body>
50 </html>