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

站长资源 2024/11/24 佚名

68 1538 68

DDR爱好者之家 Design By 杰米

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

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

涵盖的内容主要：滑块前端样式（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下载链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js支付宝滑块验证码,js支付宝验证码,js滑块验证码

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“javascript实现支付宝滑块验证码效果”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

vue中全局路由守卫中替代this操作(this.$store/this.$vux)

解决父组件将子组件作为弹窗调用只执行一次created的问题

评论“javascript实现支付宝滑块验证码效果”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接