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


Posted in Javascript onJuly 24, 2020

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

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

涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写。)

备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题。大家直接粘贴代码到对应的文件,便可直接运行。

运行结果

首先给出几张效果图。

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

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

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

滑块前端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下载链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
JavaScript实现筛选数组
Mar 02 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
You might like
PHP提取中文首字母
2008/04/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
CI框架常用函数封装实例
2016/11/21 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP实现文件上传与下载
2020/08/28 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
《乡愁》教学反思
2014/02/18 职场文书
行政内勤岗位职责
2014/04/07 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年导购员工作总结
2014/11/18 职场文书
实习工作表现评语
2014/12/31 职场文书
小学生运动会广播
2015/08/19 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python