摘要:為了加強驗證功能,減少的被攻擊。隊長要求做一個支付寶的滑塊驗證效果。通過查找大多數(shù)案例都是端展示效果,在手機端并不能友好展示。原文鏈接仿支付寶滑塊驗證碼效果的前端實現(xiàn)展示效果圖滑塊效果的前端實現(xiàn)。
為了加強驗證功能,減少APP的被攻擊。隊長要求做一個支付寶的滑塊驗證效果。除了它外觀和用戶體驗上的優(yōu)秀外,它的安全性并未降低,通過對用戶行為的分析保證了安全校驗。
通過查找大多數(shù)案例都是PC端展示效果,在手機端并不能友好展示。于是參考一位CSND博主的文章進行了一些修改。
原文鏈接 CSDN-仿支付寶滑塊驗證碼效果的前端實現(xiàn)
展示效果圖:
滑塊效果的前端實現(xiàn)。涵蓋的內(nèi)容主要: 滑塊前端樣式(html排版),滑塊的閃光移動效果(CSS3 動畫),以及滑塊滑動腳本的編寫(javascript 按住,拖動,離開事件的編寫。)
備注: 本實例HTML、CSS并無改動,只有 JS 的修改。
HTMl代碼
滑動
CSS代碼
#drag{ position: relative; background-color: #e8e8e8; width: 300px; height: 34px; line-height: 34px; text-align: center; } #drag .handler{ position: absolute; top: 0px; left: 0px; width: 40px; height: 32px; border: 1px solid #ccc; cursor: move; } .handler_bg{ background: #fff url("../img/slider.png") no-repeat center; } .handler_ok_bg{ background: #fff url("../img/complet.png") no-repeat center; } #drag .drag_bg{ background-color: #7ac23c; height: 34px; width: 0px; } #drag .drag_text{ position: absolute; top: 0px; width: 300px; color:#9c9c9c; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select:none; -ms-user-select:none; font-size: 12px; // add }
JS代碼
備注: 本實例HTML、CSS并無改動,只有 JS 的修改。
1、將鼠標按下,移動,松開事件 換成 按住開始,按住移動,按住結(jié)束
2、定義手指所放在元素上的位置,來獲取pageX
3、取消事件綁定 off()
$.fn.drag = function(options) { var x, drag = this, isMove = false, defaults = { }; var options = $.extend(defaults, options); var handler = drag.find(".handler"); var drag_bg = drag.find(".drag_bg"); var text = drag.find(".drag_text"); var maxWidth = drag.width() - handler.width(); //能滑動的最大間距 //觸摸屏幕時候的x軸的位置 handler.on("touchstart",function(e) { e.preventDefault(); isMove = true; var _touch = e.originalEvent.targetTouches[0];// 把元素放在手指所在的位置 x = _touch.pageX - parseInt(handler.css("left"), 10); }) //滑塊在移動時,移動距離大于0小于最大間距,滑塊x軸位置等于滑塊移動距離 .on("touchmove",function(e) { e.preventDefault(); var _touch = e.originalEvent.changedTouches[0]; var _x = _touch.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css("left"), 10)) = x if (isMove) { if (_x > 0 && _x <= maxWidth) { handler.css({"left": _x}); drag_bg.css({"width": _x}); } else if (_x > maxWidth) { //鼠標指針移動距離達到最大時清空事件 dragOk(); } } }) //離開觸摸屏幕時,判斷位置 .on("touchend", function(e) { e.preventDefault(); isMove = false; var _touch = e.originalEvent.changedTouches[0]; var _x = _touch.pageX - x; if (_x < maxWidth) { //松開滑塊時,如果沒有達到最大距離位置,滑塊就返回初始位置 handler.css({"left": 0}); drag_bg.css({"width": 0}); } }); //清空事件 function dragOk() { handler.removeClass("handler_bg").addClass("handler_ok_bg"); text.removeClass("slidetounlock").text("驗證通過").css({"color":"#fff"}); //modify // drag.css({"color": "#fff !important"}); handler.css({"left": maxWidth}); // add drag_bg.css({"width": maxWidth}); // add //注意取消綁定的事件 handler.off("touchstart"); handler.off("touchmove"); handler.off("touchend"); } };
如有問題,歡迎大家交流指正。QQ:1357912285
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52185.html
摘要:出現(xiàn)的地方就是在上滑塊無法拖動,經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候,由于手機自帶的輸入法彈起造成頁面向上滾動,會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。 先說下業(yè)務邏輯:登錄頁面,滑塊驗證,手機號碼輸入完成以后,會有一個滑塊驗證,驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。 showImg(http...
摘要:出現(xiàn)的地方就是在上滑塊無法拖動,經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候,由于手機自帶的輸入法彈起造成頁面向上滾動,會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。 先說下業(yè)務邏輯:登錄頁面,滑塊驗證,手機號碼輸入完成以后,會有一個滑塊驗證,驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。 showImg(http...
摘要:出現(xiàn)的地方就是在上滑塊無法拖動,經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候,由于手機自帶的輸入法彈起造成頁面向上滾動,會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。 先說下業(yè)務邏輯:登錄頁面,滑塊驗證,手機號碼輸入完成以后,會有一個滑塊驗證,驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。 showImg(http...
摘要:仿滴滴出行項目最近,各大社區(qū)出現(xiàn)很多小伙伴的項目,趁著這股熱潮我也用擼了一個滴滴出行的項目。可是,后來在手機上發(fā)現(xiàn),輸入的時候居然調(diào)不出軟鍵盤,寫項目的時候沒考慮到設備問題,簡直是大大的失誤。也就是說可以在組件內(nèi)部進行請求,不需要提交。 Vue2.0 仿滴滴出行項目 最近,各大社區(qū)出現(xiàn)很多小伙伴的vue項目,趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
閱讀 2424·2021-11-23 10:04
閱讀 1494·2021-09-02 15:21
閱讀 892·2019-08-30 15:44
閱讀 1061·2019-08-30 10:48
閱讀 707·2019-08-29 17:21
閱讀 3554·2019-08-29 13:13
閱讀 1983·2019-08-23 17:17
閱讀 1784·2019-08-23 17:04