滑动验证
拖動滑塊進行驗證碼的驗證。
滑動驗證有兩種：
一 ： 圖片滑動驗證
效果演示
原始樣式
沒有正確驗證的時候滑塊會直接回到初始位置讓你再次滑動驗證
驗證成功會給出提示
看代碼之前**注意：**代碼中要引入相應架包
代碼演示
<!DOCTYPE html> <html lang="zh-cn"> <head><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/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-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;}</style><body><div id="mpanel4" style="margin-top:50px;"> </div> </body> <script type="text/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>關于圖片的滑動驗證已經結束，下面看一下關于滑動條驗證的方式驗證。
二 ： 滑動條驗證
效果演示
原始樣式
點擊滑動
滑動完畢給出成功的提示
看代碼之前**注意：**代碼中要引入相應架包
代碼演示
<!DOCTYPE html> <html lang="zh-cn"> <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/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> <body><div id="mpanel1" > </div><script type="text/javascript">$('#mpanel1').slideVerify({type : 1, //類型vOffset : 5, //誤差量，根據需求自行調整barSize : {width : '80%',height : '40px',},ready : function() {},success : function() {alert('驗證成功，添加你自己的代碼！');//......后續操作},error : function() { // alert('驗證失敗！');}});</script> </body> </html>總結
- 上一篇： 顶部导航栏
- 下一篇： jsoup 简单应用