當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

滑动验证前端代码实现

發布時間：2024/1/23 HTML 22 豆豆

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

支付寶的滑塊驗證效果，又刷新了大家對于驗證碼的認知，這種滑塊效果，改善了用戶體驗。除了它外觀和用戶體驗上的優秀外，其實它的安全性也并未降低，后端對用戶行為的分析依然保證了安全校驗。?
下面我們在此介紹一下，滑塊效果的前端實現。?
涵蓋的內容主要：滑塊前端樣式（html排版），滑塊的閃光移動效果（CSS3 動畫），以及滑塊滑動腳本的編寫（javascript 移動，點擊，拖拽事件的編寫。）

備注：本實例基于網上Demo 增添 CSS效果和修復 JS BUG 等問題。大家直接粘貼代碼到對應的文件，便可直接運行。

運行結果

首先給出幾張效果圖。?

滑塊前端HTML

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>滑動</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">請按住滑塊，拖動到最右邊</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(); //能滑動的最大間距//鼠標按下時候的x軸的位置handler.mousedown(function(e) {isMove = true;x = e.pageX - parseInt(handler.css('left'), 10);});//鼠標指針在上下文移動時，移動距離大于0小于最大間距，滑塊x軸位置等于鼠標移動聚合力$(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) {//鼠標指針移動距離達到最大時清空事件dragOk();}}}).mouseup(function(eJ) {isMove = false;var _x = e.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}); // adddrag_bg.css({'width': maxWidth}); // addhandler.unbind('mousedown');$(document).unbind('mousemove');$(document).unbind('mouseup');} };

二：基于vue實現

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

代码

上一篇： php生成图片验证码-附五种验证码
下一篇：记一次偶遇Adminer