當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

滑动验证

發(fā)布時間：2025/3/12 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了滑动验证小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

拖動滑塊進(jìn)行驗證碼的驗證。

滑動驗證有兩種：

圖片滑動驗證

長方形的滑動條驗證

一：圖片滑動驗證

效果演示

原始樣式

沒有正確驗證的時候滑塊會直接回到初始位置讓你再次滑動驗證

驗證成功會給出提示

看代碼之前**注意：**代碼中要引入相應(yīng)架包

代碼演示

<!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, //誤差量，根據(jù)需求自行調(diào)整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('驗證成功，添加你自己的代碼！');//......后續(xù)操作},error : function() { // alert('驗證失敗！');}});</script> </html>

關(guān)于圖片的滑動驗證已經(jīng)結(jié)束，下面看一下關(guān)于滑動條驗證的方式驗證。

二：滑動條驗證

效果演示

原始樣式

點擊滑動

滑動完畢給出成功的提示

看代碼之前**注意：**代碼中要引入相應(yīng)架包

代碼演示

<!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, //誤差量，根據(jù)需求自行調(diào)整barSize : {width : '80%',height : '40px',},ready : function() {},success : function() {alert('驗證成功，添加你自己的代碼！');//......后續(xù)操作},error : function() { // alert('驗證失敗！');}});</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的滑动验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

编程问答

滑动验证

拖動滑塊進(jìn)行驗證碼的驗證。

一 ： 圖片滑動驗證

效果演示

代碼演示

二 ： 滑動條驗證

效果演示

代碼演示

總結(jié)

一：圖片滑動驗證

二：滑動條驗證