拼图验证码

H5的Canvas实现一个拼图验证码。

功能分析：
1.验证码图片的生成
2.滑块图片的显示
3.底部滑块的横向移动
4.滑块上的文字显示

效果演示：

初始状态
在这里插入图片描述
滑动成功之后
有没有一种心动的感觉呢？？？

代码演示

==注意：==程序中要引入jquery.js架包

Body内容

		<link rel="stylesheet" href="css/style.css"><style>.container {width: 310px;margin: 100px auto;
}
#msg {width: 100%;line-height: 40px;font-size: 14px;text-align: center;
}
a:link,a:visited,a:hover,a:active {margin-left: 100px;color: #0366D6;
}
</style></head><body><div class="container"><div id="captcha" style="position: relative"></div><div id="msg"></div></div></body>

jquery内容

	<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">jigsaw.init(document.getElementById('captcha'), function() {document.getElementById('msg').innerHTML = '登录成功！'})</script>

引入的style.css样式

.block {position: absolute;left: 0;top: 0;
}.sliderContainer {position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background: #f7f9fa;color: #45494c;border: 1px solid #e4e7eb;
}.sliderContainer_active .slider {height: 38px;top: -1px;border: 1px solid #1991FA;
}.sliderContainer_active .sliderMask {height: 38px;border-width: 1px;
}.sliderContainer_success .slider {height: 38px;top: -1px;border: 1px solid #52CCBA;background-color: #52CCBA !important;
}.sliderContainer_success .sliderMask {height: 38px;border: 1px solid #52CCBA;background-color: #D2F4EF;
}.sliderContainer_success .sliderIcon {background-position: 0 0 !important;
}.sliderContainer_fail .slider {height: 38px;top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;
}.sliderContainer_fail .sliderMask {height: 38px;border: 1px solid #f57a7a;background-color: #fce1e1;
}.sliderContainer_fail .sliderIcon {background-position: 0 -83px !important;
}
.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {display: none;
}.sliderMask {position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991FA;background: #D1E9FE;
}.slider {position: absolute;top: 0;left: 0;width: 40px;height: 40px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background .2s linear;
}.slider:hover {background: #1991FA;
}.slider:hover .sliderIcon {background-position: 0 -13px;
}.sliderIcon {position: absolute;top: 15px;left: 13px;width: 14px;height: 10px;background: url(../img/icon_light.f13cff3.png) 0 -26px;background-size: 34px 471px;
}.refreshIcon {position: absolute;right: 0;top: 0;width: 34px;height: 34px;cursor: pointer;background: url(../img/icon_light.f13cff3.png) 0 -437px;background-size: 34px 471px;
}

如果有小伙伴看上面代码不太理解的话请看下面完整代码。

完整代码展示

页面内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Canvas拼图验证码</title><link rel="stylesheet" href="css/style.css"><style>.container {width: 310px;margin: 100px auto;
}
#msg {width: 100%;line-height: 40px;font-size: 14px;text-align: center;
}
a:link,a:visited,a:hover,a:active {margin-left: 100px;color: #0366D6;
}
</style></head><body><div class="container"><div id="captcha" style="position: relative"></div><div id="msg"></div></div></body><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">jigsaw.init(document.getElementById('captcha'), function() {document.getElementById('msg').innerHTML = '登录成功！'})</script>
</html>

style.css样式

.block {position: absolute;left: 0;top: 0;
}.sliderContainer {position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background: #f7f9fa;color: #45494c;border: 1px solid #e4e7eb;
}.sliderContainer_active .slider {height: 38px;top: -1px;border: 1px solid #1991FA;
}.sliderContainer_active .sliderMask {height: 38px;border-width: 1px;
}.sliderContainer_success .slider {height: 38px;top: -1px;border: 1px solid #52CCBA;background-color: #52CCBA !important;
}.sliderContainer_success .sliderMask {height: 38px;border: 1px solid #52CCBA;background-color: #D2F4EF;
}.sliderContainer_success .sliderIcon {background-position: 0 0 !important;
}.sliderContainer_fail .slider {height: 38px;top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;
}.sliderContainer_fail .sliderMask {height: 38px;border: 1px solid #f57a7a;background-color: #fce1e1;
}.sliderContainer_fail .sliderIcon {background-position: 0 -83px !important;
}
.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {display: none;
}.sliderMask {position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991FA;background: #D1E9FE;
}.slider {position: absolute;top: 0;left: 0;width: 40px;height: 40px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background .2s linear;
}.slider:hover {background: #1991FA;
}.slider:hover .sliderIcon {background-position: 0 -13px;
}.sliderIcon {position: absolute;top: 15px;left: 13px;width: 14px;height: 10px;background: url(../img/icon_light.f13cff3.png) 0 -26px;background-size: 34px 471px;
}.refreshIcon {position: absolute;right: 0;top: 0;width: 34px;height: 34px;cursor: pointer;background: url(../img/icon_light.f13cff3.png) 0 -437px;background-size: 34px 471px;
}