前端实现拖动滑块完成验证

index.html

 <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>

index.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}
}
#drag{position: relative;background-color: #e8e8e8;width: 300px;height: 40px;line-height: 40px;text-align: center;margin-bottom:20px;
}
#drag .handler{position: absolute;top: 0px;left: 0px;width: 40px;height: 38px;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;*/background: #8dcefb;height: 40px;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;
}

index.js

<script>$('#drag').drag();
</script>
<script>$.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)) = xif (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 });                   // adddrag_bg.css({ 'width': maxWidth });                  // addloginFlag =1;handler.unbind('mousedown');$(document).unbind('mousemove');$(document).unbind('mouseup');}};</script>

前端实现拖动滑块完成验证相关推荐

python模拟鼠标拖动滑块_py+selenium拼图式拖动滑块的验证
我这边是前端提供了随机生成缺口的位置,只适合部分人先定位到需要移动的滑块位置, 应为我这边随机生成的缺口位置是display:none无法获取元素所以要先修改成block才能读取这里有一个坑就是如 ...
拼图式拖动滑块的验证——使用selenium+python实现
写京东登录的自动化测试用例的时候遇到了这样一个问题当你不能成功登录多次.就连正确账户密码登录(偶发)的时候,都会出现验证环节(PS.当然也有死活不出现的时候,比如写文的今天9月30),妥妥阻挡了自动 ...
Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
自定义的可拖动滑块验证码的实现方式（SlideView）
概述: 最近项目中需要在密码输入一定次数后尽心拖动滑块进行验证,防止恶意程序代码一直测试登录,用了GitHub的一个开源库SlideView,但是直接依赖源码是改不了样式的,下边给出自定义的可拖动滑块 ...
前端JS——滑动滑块验证登录（源码及效果）
源码: <!doctype html> <html lang="en"><head><meta charset="UTF-8&q ...
jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
vue拖动滑块验证组件
组件Slider.vue <template><div class="drag" ref="dragDiv"><div class ...
拖动滑块验证--vue实现
代码引用的css与js都是线上的将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标 ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

前端实现拖动滑块完成验证

前端实现拖动滑块完成验证相关推荐

最新文章

热门文章