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

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

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

涵盖的内容主要： 滑块前端样式（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_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下载链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用 Node.js 模拟滑动拼图验证码操作的示例代码

    使用 Node.js 模拟滑动拼图验证码操作的示例代码

    近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu

  • Js逆向实现滑动验证码图片还原的示例代码

    本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的 那你应该会想到,那段

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

  • JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes

  • js插件实现图片滑动验证码

    js插件实现图片滑动验证码

    图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标. 先上代码吧,做个备份记录 jquery.lgymove.js /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }

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

    支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题.大家直接粘贴代码到对应的文件

  • JavaScript实现滑块验证码

    JavaScript实现滑块验证码

    本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随移动,移动到大图背景缺少区域即可完成验证.以上效果要实现,需要鼠标按下(mousedown事件),鼠标松开(mouseup事件),鼠标移动(mousemove事件)这几个事件. 先制作html部分实现静态效果,大图里面可移动的小块背景大小与大图一致,给小图块的背景添加background-position属性来控制小

  • Node.JS用纯JavaScript生成图片或滑块式验证码功能

    有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si

  • iOS滑动解锁、滑动获取验证码效果的实现代码

    iOS滑动解锁、滑动获取验证码效果的实现代码

    最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1

  • JS+CSS实现仿支付宝菜单选中效果代码

    JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin

  • JavaScript仿支付宝6位数字密码输入框

    JavaScript仿支付宝6位数字密码输入框

    前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

  • php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

    本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE

  • python 模拟网站登录——滑块验证码的识别

    python 模拟网站登录——滑块验证码的识别

    普通滑动验证 以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简单.拖动之前需要先将滚动条滚动到指定元素位置. import time from selenium import webdriver from selenium.webdriver import ActionChains # 新建selenium浏览器对象,后面是geckodriver.exe下载后本地路径 browser = webdriver.Fire

  • JavaScript实现页面动态验证码的实现示例

    JavaScript实现页面动态验证码的实现示例

    引言: 现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现.我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看. 效果图: 实现思路: 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码: 把验证码渲染出来(一个一个的渲染): 绘制一定数量的干扰线,随机颜色: 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码. 编写构造函数 文本构造函数 //文字的构造函数 function Te

随机推荐