一、下载框架文件，放到项目素材（js、css、img）目录
jQuery验证码插件
二、新建页面，按格式调用验证码生成代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.1使用jQuery框架实现图形滑块验证码</title>
<link rel="stylesheet" type="text/css" href="css/verify.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/verify.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#btnOK {
border: none;
color: white;
text-align: center;
padding: 5px 10px;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<form method="post" action="index.jsp">
<div>
<label>验证：</label>
<div id="sliderImg"></div>
</div>
<div>
<input type="submit" value="登录" id="btnOK" disabled="disabled" " />
</div>
<script type="text/javascript">
$("#sliderImg").slideVerify({
type : 2, //类型
vOffset : 5, //误差量
vSpace : 5, //间隔
imgName : [ '1.png', '2.png', '3.png' ],
imgSize : {
width : '400px',
height : '200px',
},
blockSize : {
width : '40px',
height : '40px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function() {
},
success : function() {
$("#btnOK").prop("disabled", "");
$("#btnOK").css("background-color", "#008cba");
},
error : function() {
}
});
</script>
</form>
</body>
</html>
网友评论