第JavaScript實現(xiàn)拼圖式滑塊驗證功能目錄演示前戲源碼介紹主頁樣式設計滑塊驗證部分img_ver內部

演示

前戲

滑塊驗證碼是在網站、APP等應用中常見的一種驗證方式，通過按照一定規(guī)則滑動滑塊到指定位置完成驗證，才可以進行下一步操作?；瑝K驗證碼有兩種設計，一種是在滑動框內一滑到底即完成驗證的，還有一種是滑動滑塊拼合拼圖完成驗證的。由于拼圖式的滑塊驗證碼安全性更高，趣味性更強，所以多數網站或APP都選擇了拼圖式的滑塊驗證碼。

拼圖式的滑塊驗證碼在業(yè)務應用中有三種展現(xiàn)形式，觸發(fā)式、嵌入式和彈出式。觸發(fā)式即鼠標光標移入驗證條后才顯示驗證拼圖，不影響網頁原有的排版。嵌入式即拼圖驗證區(qū)域直接嵌入展示在網頁，清晰直觀，便于用戶使用。彈出式一般可以綁定自有驗證方式，點擊驗證后才彈出滑動驗證碼，比如用戶輸入用戶名和密碼，點擊登錄后，頁面彈出滑塊驗證碼。

源碼介紹

主頁樣式設計

.bxs-row{

margin-bottom:12px;

.logo-box{

width:404px;

margin:120pxauto;

border:1pxsolid#e5e5e5;

border-radius:4px;

box-shadow:04px18pxrgba(0,0,0,0.2);

position:relative;

overflow:hidden;

height:360px;

.login{

position:absolute;

width:320px;left:0;

top:0;

padding:42px42px36px;

transition:all0.8s;

.username,.password,.btn{

height:44px;

width:100%;

padding:010px;

border:1pxsolid#9da3a6;

background:#fff;

text-overflow:ellipsis;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

-webkit-border-radius:4px;

-moz-border-radius:4px;

-khtml-border-radius:4px;

border-radius:4px;

-webkit-box-shadow:none;

-moz-box-shadow:none;

box-shadow:none;

color:#000;

font-size:1em;

font-family:Helvetica,Arial,sans-serif;

font-weight:400;

direction:ltr;

font-size:13px;

.submit{

background-color:#0070ba;

color:#fff;

border:1pxsolid#0070ba;

.submit:hover{

background-color:#005ea6;

.verBox{

position:absolute;

width:100%;

text-align:center;

left:404px;

top:0;

opacity:0;

transition:all0.8s;

padding-top:55px;

.err{

margin:12px00;

line-height:12px;

height:12px;

font-size:12px;

color:red;

}

滑塊驗證部分

這里使用了一個工具img_ver.js網上都是關于vue的沒有這個簡單

imgVer({

el:'$("#imgVer")',

width:'260',

height:'116',

img:[

'images/ver-1.png',

'images/ver-2.png',

success:function(){

//alert('執(zhí)行登錄函數');

$(".login").css({

"left":"0",

"opacity":"1"

$(".verBox").css({

"left":"404px",

"opacity":"0"

$(".tips").html('你是不是不知道賬號密碼?。?？？');

$("#logo").attr("src",'images/login-err.png')

error:function(){

//alert('錯誤什么都不執(zhí)行')

});

img_ver內部

滑塊移動和驗證部分

ctx.moveTo(X,Y);

ctx.lineTo(X+d,Y);

ctx.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);

ctx.lineTo(X+3*d,Y);

ctx.lineTo(X+3*d,Y+d);

ctx.bezierCurveTo(X+2*d,Y+d,X+2*d,Y+2*d,X+3*d,Y+2*d);

ctx.lineTo(X+3*d,Y+3*d);

ctx.lineTo(X,Y+3*d);

ctx_l.moveTo(X,Y);

ctx_l.lineTo(X+d,Y);

ctx_l.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);

ctx_l.lineTo(X+3*d,Y);

ctx_l.lineTo(X+3*d,Y+d);

ctx_l.bezierCurveTo(X+2*d,Y+d,X+2*d,Y+2*d,X+3*d,Y+2*d);

ctx_l.lineTo(X+3*d,Y+3*d);

ctx_l.lineTo(X,Y+3*d);

ctx_s.moveTo(X,Y);

ctx_s.lineTo(X+d,Y);

ctx_s.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);

ctx_s.lineTo(X+3*d,Y);

ctx_s.lineTo(X+3*d,Y+d);

ctx_s.bez