脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 拖动滑块验证

基于JS组件实现拖动滑块验证功能(代码分享)

 更新时间：2016年11月18日 15:41:13   作者：liu_bao_jin  
拖动滑块验证功能在支付宝，微信各大平台都能见到这样的功能，那么基于js组件是如何实现此功能的呢？今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,需要的朋友参考下吧

拖动滑块验证功能在支付宝，微信各大平台都能见到这样的功能，那么基于js组件是如何实现此功能的呢？今天小编就给大家分享下js 拖动滑块 验证功能的实现代码，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE-Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
<meta content="telephone=no" name="format-detection"> 
<meta content="email=no" name="format-detection"> 
<title>拖动滑块验证</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="">
<style>
*{ margin:0; padding:0; }
body{ font:12px/1.125 Microsoft YaHei; background:#fff; }
ul, li{ list-style:none; }
a{ text-decoration:none; }
.ani{transition:all .3s;}
.wrap{ width:300px; height:350px; text-align:center; margin:150px auto;}
.inner{ padding:15px; }
.clearfix{ overflow:hidden; _zoom:1; }
.none{ display:none; }
#slider{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}
#slider .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc;cursor:move;}
.handler_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;}
.handler_ok_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}
#slider .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
#slider .drag_text{position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
.unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
.slide_ok{color:#fff;}
</style>
</head>
<body>
<div class="wrap">
<div id="slider">
<div class="drag_bg"></div>
<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
<div class="handler handler_bg"></div>
</div>
</div>

<script>
(function(window,document,undefined){
var dog = {//声明一个命名空间，或者称为对象
$:function(id){
return document.querySelector(id);
},
on:function(el,type,handler){
el.addEventListener(type,handler,false);
},
off:function(el,type,handler){
el.removeEventListener(type,handler,false);
}
}; 
//封装一个滑块类
function Slider(){
var args = arguments[0];
for(var i in args){
this[i] = args[i]; //一种快捷的初始化配置
}
//直接进行函数初始化，表示生成实例对象就会执行初始化
this.init();
}
Slider.prototype = {
constructor:Slider,
init:function(){
this.getDom();
this.dragBar(this.handler);
},
getDom:function(){
this.slider = dog.$('#'+this.id);
this.handler = dog.$('.handler');
this.bg = dog.$('.drag_bg');
},
dragBar:function(handler){
var that = this,
startX = 0,
lastX = 0,
doc = document,
width = this.slider.offsetWidth,
max = width - handler.offsetWidth,
drag = {
down:function(e){
var e = e||window.event;
that.slider.classList.add('unselect');
startX = e.clientX - handler.offsetLeft;
console.log('startX: '+startX+' px');
dog.on(doc,'mousemove',drag.move);
dog.on(doc,'mouseup',drag.up);
return false;
},
move:function(e){
var e = e||window.event;
lastX = e.clientX - startX;
lastX = Math.max(0,Math.min(max,lastX)); //这一步表示距离大于0小于max，巧妙写法
console.log('lastX: '+lastX+' px');
if(lastX>=max){
handler.classList.add('handler_ok_bg');
that.slider.classList.add('slide_ok');
dog.off(handler,'mousedown',drag.down);
drag.up();
}
that.bg.style.width = lastX + 'px';
handler.style.left = lastX + 'px';
},
up:function(e){
var e = e||window.event;
that.slider.classList.remove('unselect');
if(lastX < width){ 
that.bg.classList.add('ani');
handler.classList.add('ani');
that.bg.style.width = 0;
handler.style.left = 0;
setTimeout(function(){
that.bg.classList.remove('ani');
handler.classList.remove('ani');
},300);
}
dog.off(doc,'mousemove',drag.move);
dog.off(doc,'mouseup',drag.up);
}
};
dog.on(handler,'mousedown',drag.down);
}
};
window.S = window.Slider = Slider;
})(window,document);
var defaults = {
id:'slider'
};
new S(defaults);
</script>
</body>
</html>

以上所述是小编给大家介绍的基于JS组件实现拖动滑块验证功能(代码分享)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序自定义tabBar的步骤记录

    微信小程序自定义tabBar的步骤记录

    微信小程序开发越来越多样化,各种丰富的设计及体验,自定义tabBar也经常使用,下面这篇文章主要给大家介绍了关于微信小程序如何自定义tabBar的相关资料,需要的朋友可以参考下
    2021-08-08
  • JavaScript中for..in循环陷阱介绍

    JavaScript中for..in循环陷阱介绍

    for...in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引，下面有个不错的示例大家可以参考下
    2013-11-11
  • JS实现放大镜效果

    JS实现放大镜效果

    这篇文章主要为大家详细介绍了JS实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 原生javascript实现addClass,removeClass,hasClass函数

    原生javascript实现addClass,removeClass,hasClass函数

    这篇文章主要介绍了原生javascript实现addClass,removeClass,hasClass函数的相关代码，有需要的小伙伴可以参考下
    2016-02-02
  • JS获取iframe中marginHeight和marginWidth属性的方法

    JS获取iframe中marginHeight和marginWidth属性的方法

    这篇文章主要介绍了JS获取iframe中marginHeight和marginWidth属性的方法,涉及javascript操作iframe属性的技巧,并分析了marginHeight和marginWidth属性的功能,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript迭代器与生成器使用详解

    JavaScript迭代器与生成器使用详解

    迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现，这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下
    2022-11-11
  • JavaScript进阶知识点作用域详解

    JavaScript进阶知识点作用域详解

    这篇文章主要介绍了JavaScript进阶讲解一作用域,主要包括作用域、函数、闭包、面向对象、ES新特性、事件循环、微任务、宏任务、内存管理、Promise、await、 asnyc、防抖、节流等等知识点，需要的朋友可以参考下
    2022-05-05
  • js实现正方形颜色从下往上升的效果

    js实现正方形颜色从下往上升的效果

    大家有没有看到类似颜色从下往上升的效果，在本例将与大家介绍下此效果的具体实现
    2014-08-08
  • JS三级联动代码格式实例详解

    JS三级联动代码格式实例详解

    这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • js获取及修改网页背景色和字体色的方法

    js获取及修改网页背景色和字体色的方法

    这篇文章主要介绍了js获取及修改网页背景色和字体色的方法,涉及JavaScript针对页面元素属性的相关操作技巧,需要的朋友可以参考下
    2015-12-12

最新评论