當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

滑动验证前端代码实现

發(fā)布時(shí)間：2024/1/23 HTML 34 豆豆

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

支付寶的滑塊驗(yàn)證效果，又刷新了大家對(duì)于驗(yàn)證碼的認(rèn)知，這種滑塊效果，改善了用戶體驗(yàn)。除了它外觀和用戶體驗(yàn)上的優(yōu)秀外，其實(shí)它的安全性也并未降低，后端對(duì)用戶行為的分析依然保證了安全校驗(yàn)。?
下面我們?cè)诖私榻B一下，滑塊效果的前端實(shí)現(xiàn)。?
涵蓋的內(nèi)容主要：滑塊前端樣式（html排版），滑塊的閃光移動(dòng)效果（CSS3 動(dòng)畫），以及滑塊滑動(dòng)腳本的編寫（javascript 移動(dòng)，點(diǎn)擊，拖拽事件的編寫。）

備注：本實(shí)例基于網(wǎng)上Demo 增添 CSS效果和修復(fù) JS BUG 等問題。大家直接粘貼代碼到對(duì)應(yīng)的文件，便可直接運(yùn)行。

運(yùn)行結(jié)果

首先給出幾張效果圖。?

滑塊前端HTML

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>滑動(dòng)</title><link rel="stylesheet" href="css/drag.css"><script src="js/jquery-1.7.1.min.js"></script><script src="js/drag.js"></script><style type="text/css">.slidetounlock {font-size: 12px;background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:slidetounlock 3s infinite;-webkit-text-size-adjust: none}@-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}</style> </head> <body> <div id="wrapper" style="position: relative:top; 300px; left: 300px; "><div id="drag"><div class="drag_bg"></div><div class="drag_test slidetounlock" onselectstart="return false;" unselectable="on">請(qǐng)按住滑塊，拖動(dòng)到最右邊</div><div class="handler handler_bg"></div></div> </div><script>$('#drag').drag();</script> </body> </html>

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

/*** Created by shuai_wy on 2017/3/14*/ $.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(); //能滑動(dòng)的最大間距//鼠標(biāo)按下時(shí)候的x軸的位置handler.mousedown(function(e) {isMove = true;x = e.pageX - parseInt(handler.css('left'), 10);});//鼠標(biāo)指針在上下文移動(dòng)時(shí)，移動(dòng)距離大于0小于最大間距，滑塊x軸位置等于鼠標(biāo)移動(dòng)聚合力$(document).mousemove(function(e) {var _x = e.pageX - x; //_x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = xif (isMove) {if (_x > 0 && _x <= maxWidth) {handler.css({'left': _x});drag_bg.css({'width': _x});} else if (_x > maxWidth) {//鼠標(biāo)指針移動(dòng)距離達(dá)到最大時(shí)清空事件dragOk();}}}).mouseup(function(eJ) {isMove = false;var _x = e.pageX - x;if (_x < maxWidth) { //鼠標(biāo)松開時(shí)，如果沒有達(dá)到最大距離位置，滑塊就返回初始位置handler.css({'left': 0});drag_bg.css({'width': 0});}});//清空事件function dragOk() {handler.removeClass('handler_bg').addClass('handler_ok_bg');text.removeClass('slidetounlock').text('驗(yàn)證通過').css({'color':'#fff'}); //modify// drag.css({'color': '#fff !important'});handler.css({'left': maxWidth}); // adddrag_bg.css({'width': maxWidth}); // addhandler.unbind('mousedown');$(document).unbind('mousemove');$(document).unbind('mouseup');} };

二：基于vue實(shí)現(xiàn)

https://www.jianshu.com/p/f5bf9ba0b27e

總結(jié)

以上是生活随笔為你收集整理的滑动验证前端代码实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

代码

上一篇： php生成图片验证码-附五种验证码
下一篇： Puppeteer设置浏览器代理的三种思