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 cookies操作集合
Apr 12 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
小程序实现搜索框功能
Mar 26 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 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
MySQL相关说明
2007/01/15 PHP
discuz安全提问算法
2007/06/06 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
基于python实现名片管理系统
2018/11/30 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
什么是索引指示器
2012/08/20 面试题
中文系师范生自荐信
2013/10/01 职场文书
渡河少年教学反思
2014/02/12 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
python中os.path.join()函数实例用法
2021/05/26 Python
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL