javascript實現(xiàn)支付寶滑塊驗證碼效果

更新時間：2020年07月24日 17:29:23 作者：超帥的菜鳥博主

這篇文章主要為大家詳細介紹了javascript實現(xiàn)支付寶滑塊驗證碼效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

支付寶的滑塊驗證效果，又刷新了大家對于驗證碼的認知，這種滑塊效果，改善了用戶體驗。除了它外觀和用戶體驗上的優(yōu)秀外，其實它的安全性也并未降低，后端對用戶行為的分析依然保證了安全校驗。

下面我們在此介紹一下，滑塊效果的前端實現(xiàn)。

涵蓋的內(nèi)容主要：滑塊前端樣式（html排版），滑塊的閃光移動效果（CSS3 動畫），以及滑塊滑動腳本的編寫（javascript 移動，點擊，拖拽事件的編寫。）

備注：本實例基于網(wǎng)上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_text slidetounlock" onselectstart="return false;" unselectable="on">
 請按住滑塊，拖動到最右邊
 </div>
 <div class="handler handler_bg"></div>
 </div>
</div>

 <!--<a href="#" class="img"><img src="img/Lighthouse.jpg"/></a>-->
<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)) = x
 if (isMove) {
 if (_x > 0 && _x <= maxWidth) {
 handler.css({'left': _x});
 drag_bg.css({'width': _x});
 } else if (_x > maxWidth) { //鼠標指針移動距離達到最大時清空事件
 dragOk();
 }
 }
 }).mouseup(function(e) {
 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}); // add
 drag_bg.css({'width': maxWidth}); // add

 handler.unbind('mousedown');
 $(document).unbind('mousemove');
 $(document).unbind('mouseup');

 }
};

仿支付寶滑塊效果下載鏈接

Demo下載鏈接

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: