青岛 建网站,企业建设一个自己的网站多少钱,可以商用的图片网站,广州网站建设公司推荐拖动滑块进行验证码的验证。
滑动验证有两种#xff1a;
图片滑动验证长方形的滑动条验证
一 #xff1a; 图片滑动验证
效果演示
原始样式 没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证
验证成功会给出提示 看代码之前**注意#xff1a;**代码中要引…拖动滑块进行验证码的验证。
滑动验证有两种
图片滑动验证长方形的滑动条验证
一 图片滑动验证
效果演示
原始样式 没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证
验证成功会给出提示 看代码之前**注意**代码中要引入相应架包
script typetext/javascript srcjs/jquery.min.js/scriptscript typetext/javascript srcjs/verify.js /script代码演示
!DOCTYPE html
html langzh-cn
headscript typetext/javascript srcjs/jquery.min.js/scriptscript typetext/javascript srcjs/verify.js /script
/headstyle/*滑动验证码*/.verify-bar-area {position: relative;background: #FFFFFF;text-align: center;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;-webkit-border-radius: 4px;}.verify-bar-area .verify-move-block {position: absolute;top: 0px;left: 0;background: #fff;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;box-shadow: 0 0 2px #888888;-webkit-border-radius: 1px;}.verify-img-panel {margin:0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;border-radius: 3px;position: relative;}.verify-img-panel .verify-refresh {width: 25px;height: 25px;text-align:center;padding: 5px;cursor: pointer;position: absolute;top: 0;right: 0;z-index: 2;}.verify-img-panel .icon-refresh {font-size: 20px;color: #fff;}.verify-img-panel .verify-gap {background-color: #fff;position: relative;z-index: 2;border:1px solid #fff;}.verify-bar-area .verify-move-block .verify-sub-block {position: absolute;text-align: center;z-index: 3;border: 1px solid #fff;}.verify-bar-area .verify-move-block .verify-icon {font-size: 18px;}.verify-bar-area .verify-msg {z-index : 3;}/stylebodydiv idmpanel4 stylemargin-top:50px;
/div
/body
script typetext/javascript$(#mpanel4).slideVerify({type : 2, //类型vOffset : 5, //误差量根据需求自行调整vSpace : 5, //间隔imgName : [1.jpg, 2.jpg],imgSize : {width: 400px,height: 200px,},blockSize : {width: 40px,height: 40px,},barSize : {width : 400px,height : 40px,},ready : function() {},success : function() {alert(验证成功添加你自己的代码);//......后续操作},error : function() {
// alert(验证失败);}});/script
/html关于图片的滑动验证已经结束下面看一下关于滑动条验证的方式验证。
二 滑动条验证
效果演示
原始样式 点击滑动 滑动完毕给出成功的提示 看代码之前**注意**代码中要引入相应架包 script typetext/javascript srcjs/jquery.min.js/scriptscript typetext/javascript srcjs/verify.js /script代码演示
!DOCTYPE html
html langzh-cn
head
script typetext/javascript srcjs/jquery.min.js/script
script typetext/javascript srcjs/verify.js /script
/head
style/*滑动验证码*/.verify-bar-area {position: relative;background: #FFFFFF;text-align: center;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;-webkit-border-radius: 4px;}.verify-bar-area .verify-move-block {position: absolute;top: 0px;left: 0;background: #fff;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;box-shadow: 0 0 2px #888888;-webkit-border-radius: 1px;}.verify-bar-area .verify-move-block:hover {background-color: #337ab7;color: #FFFFFF;}.verify-bar-area .verify-left-bar {position: absolute;top: -1px;left: -1px;background: #f0fff0;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;} /style
bodydiv idmpanel1
/divscript typetext/javascript$(#mpanel1).slideVerify({type : 1, //类型vOffset : 5, //误差量根据需求自行调整barSize : {width : 80%,height : 40px,},ready : function() {},success : function() {alert(验证成功添加你自己的代码);//......后续操作},error : function() {
// alert(验证失败);}});/script
/body
/html
