JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能
演示
前戲
滑塊驗(yàn)證碼是在網(wǎng)站、APP等應(yīng)用中常見的一種驗(yàn)證方式,通過按照一定規(guī)則滑動(dòng)滑塊到指定位置完成驗(yàn)證,才可以進(jìn)行下一步操作。滑塊驗(yàn)證碼有兩種設(shè)計(jì),一種是在滑動(dòng)框內(nèi)“一滑到底”即完成驗(yàn)證的,還有一種是滑動(dòng)滑塊拼合拼圖完成驗(yàn)證的。由于拼圖式的滑塊驗(yàn)證碼安全性更高,趣味性更強(qiáng),所以多數(shù)網(wǎng)站或APP都選擇了拼圖式的滑塊驗(yàn)證碼。
拼圖式的滑塊驗(yàn)證碼在業(yè)務(wù)應(yīng)用中有三種展現(xiàn)形式,觸發(fā)式、嵌入式和彈出式。觸發(fā)式即鼠標(biāo)光標(biāo)移入驗(yàn)證條后才顯示驗(yàn)證拼圖,不影響網(wǎng)頁(yè)原有的排版。嵌入式即拼圖驗(yàn)證區(qū)域直接嵌入展示在網(wǎng)頁(yè),清晰直觀,便于用戶使用。彈出式一般可以綁定自有驗(yàn)證方式,點(diǎn)擊驗(yàn)證后才彈出滑動(dòng)驗(yàn)證碼,比如用戶輸入用戶名和密碼,點(diǎn)擊登錄后,頁(yè)面彈出滑塊驗(yàn)證碼。
源碼介紹
主頁(yè)樣式設(shè)計(jì)
.bxs-row { margin-bottom:12px; } .logo-box { width:404px; margin:120px auto; border:1px solid #e5e5e5; border-radius:4px; box-shadow:0 4px 18px rgba(0,0,0,0.2); position:relative; overflow:hidden; height:360px; } .login { position:absolute; width:320px;left:0; top:0; padding: 42px 42px 36px; transition:all 0.8s; } .username,.password,.btn { height: 44px; width: 100%; padding: 0 10px; border: 1px solid #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:1px solid #0070ba; } .submit:hover { background-color:#005ea6; } .verBox { position:absolute; width:100%; text-align:center; left:404px; top:0; opacity:0; transition:all 0.8s; padding-top:55px; } .err { margin:12px 0 0; line-height:12px; height:12px; font-size:12px; color:red; }
滑塊驗(yàn)證部分
這里使用了一個(gè)工具img_ver.js
網(wǎng)上都是關(guān)于vue的沒有這個(gè)簡(jiǎn)單
imgVer({ el:'$("#imgVer")', width:'260', height:'116', img:[ 'images/ver-1.png', 'images/ver-2.png', ], success:function () { //alert('執(zhí)行登錄函數(shù)'); $(".login").css({ "left":"0", "opacity":"1" }); $(".verBox").css({ "left":"404px", "opacity":"0" }); $(".tips").html('你是不是不知道賬號(hào)密碼?????'); $("#logo").attr("src",'images/login-err.png') }, error:function () { //alert('錯(cuò)誤什么都不執(zhí)行') } });
img_ver內(nèi)部
滑塊移動(dòng)和驗(yàn)證部分
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.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d); ctx_s.lineTo(X + 3 * d, Y + 3 * d); ctx_s.lineTo(X, Y + 3 * d);
其他的我就不展示了都是位置坐標(biāo)。
到此這篇關(guān)于JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能的文章就介紹到這了,更多相關(guān)js滑塊驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料,需要的朋友可以參考下。2015-08-08基于JavaScript實(shí)現(xiàn)智能右鍵菜單
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)資料,需要的朋友可以參考下2016-03-03比較詳細(xì)的javascript DOM 學(xué)習(xí)筆記
看了很多的js dom學(xué)習(xí)資料,發(fā)現(xiàn)這個(gè)比較詳細(xì),特轉(zhuǎn)載給大家學(xué)習(xí)一下2008-06-06javascript延時(shí)重復(fù)執(zhí)行函數(shù) lLoopRun.js
javascript延時(shí)重復(fù)執(zhí)行函數(shù) lLoopRun.js...2007-06-06JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的相關(guān)資料,我們?cè)趯?shí)際的開發(fā)過程中,經(jīng)常需要判斷對(duì)象/數(shù)組是否包含某個(gè)屬性或者某個(gè)值,需要的朋友可以參考下2023-09-09移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js使用詳解
這篇文章主要介紹了移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08跟我學(xué)習(xí)javascript的基本類型和引用類型
跟我學(xué)習(xí)javascript的基本類型和引用類型,利用圖解的方式,告訴大家javascript的基本類型和引用類型的區(qū)別和聯(lián)系,感興趣的小伙伴們可以參考一下2015-11-11