已经收录大规模修改收录页面对网站有影响吗,外贸业务员招聘人才网,金山企业型网站建设,服装市场调研报告范文H5的Canvas实现一个拼图验证码。
功能分析#xff1a; 1.验证码图片的生成 2.滑块图片的显示 3.底部滑块的横向移动 4.滑块上的文字显示
效果演示#xff1a;
初始状态 滑动成功之后 有没有一种心动的感觉呢#xff1f;#xff1f;#xff1f;
代码演示
注意#x…H5的Canvas实现一个拼图验证码。
功能分析 1.验证码图片的生成 2.滑块图片的显示 3.底部滑块的横向移动 4.滑块上的文字显示
效果演示
初始状态 滑动成功之后 有没有一种心动的感觉呢
代码演示
注意程序中要引入jquery.js架包
Body内容 link relstylesheet hrefcss/style.cssstyle.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/headbodydiv classcontainerdiv idcaptcha styleposition: relative/divdiv idmsg/div/div/bodyjquery内容 script typetext/javascript srcjs/jquery.js/scriptscript typetext/javascriptjigsaw.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 langenheadmeta charsetUTF-8titleCanvas拼图验证码/titlelink relstylesheet hrefcss/style.cssstyle.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/headbodydiv classcontainerdiv idcaptcha styleposition: relative/divdiv idmsg/div/div/bodyscript typetext/javascript srcjs/jquery.js/scriptscript typetext/javascriptjigsaw.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;
}
获取更多资讯关注我呦
