Canvas仿QQ登录图片滑块验证码插件

Canvas仿QQ登录图片滑块验证码插件

这是一款js基于canvas制作用户登录表单仿QQ第三方登录页面图片滑块验证码,拼成完整的图片验证码代码。

使用方法
在页面引入以下jigsaw.js文件

1
2
3
4
5
6
<script type="text/javascript" src="js/jigsaw.js"></script>
<script type="text/javascript">
jigsaw.init(document.getElementById('captcha'), function () {
    document.getElementById('msg').innerHTML = '登录成功!'
})
</script>

HTML结构

1
2
3
4
5
6
<div class="container">
    <input value="admin" readonly/>
    <input type="password" value="1234567890" readonly/>
    <div id="captcha" style="position: relative"></div>
    <div id="msg"></div>
</div>

CSS样式
在页面引入以下jigsaw.css样式文件

1
<link rel="stylesheet" href="css/jigsaw.css">

文件信息:

    1

    发表评论