javascript实现支付宝滑块验证码效果

(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )

支付宝的滑块验证效果，又刷新了大家对于验证码的认知，这种滑块效果，改善了用户体验。除了它外观和用户体验上的优秀外，其实它的安全性也并未降低，后端对用户行为的分析依然保证了安全校验。

下面我们在此介绍一下，滑块效果的前端实现。

涵盖的内容主要：滑块前端样式（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="/UploadFiles/2021-04-02/jquery-1.7.1.min.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


/**
 * 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下载链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：vue中全局路由守卫中替代this操作(this.$store/this.$vux)
下一篇：解决父组件将子组件作为弹窗调用只执行一次created的问题