精华内容
下载资源
问答
  • 滑动验证
    千次阅读
    2019-11-12 08:49:25

    拖动滑块进行验证码的验证。

    滑动验证有两种:

    1. 图片滑动验证
    2. 长方形的滑动条验证

    一 : 图片滑动验证

    效果演示

    原始样式
    在这里插入图片描述
    没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证

    验证成功会给出提示
    在这里插入图片描述
    看代码之前**注意:**代码中要引入相应架包

    <script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    

    代码演示

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    </head>
    
    <style>
    	/*滑动验证码*/
    	.verify-bar-area {
    	    position: relative;
    	    background: #FFFFFF;
    	   	text-align: center;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	   	border: 1px solid #ddd;
    	   	-webkit-border-radius: 4px;
    	}
    	 
    	.verify-bar-area .verify-move-block {
    	    position: absolute;
    	    top: 0px;
    	    left: 0;
    	    background: #fff;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    box-shadow: 0 0 2px #888888;
    	    -webkit-border-radius: 1px;
    	}
    	
    
    	
    	.verify-img-panel {
    		margin:0;
    		-webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    		border: 1px solid #ddd;
    		border-radius: 3px;
    		position: relative;
    	}
    	
    	.verify-img-panel .verify-refresh {
    		width: 25px;
    		height: 25px;
    		text-align:center;
    		padding: 5px;
    		cursor: pointer;
    		position: absolute;
    		top: 0;
    		right: 0;
    		z-index: 2;
    	}
    	
    	.verify-img-panel .icon-refresh {
    		font-size: 20px;
    		color: #fff;
    	}
    	
    	.verify-img-panel .verify-gap {
    		background-color: #fff;
    		position: relative;
    		z-index: 2;
    		border:1px solid #fff;
    	}
    	
    	.verify-bar-area .verify-move-block .verify-sub-block {
    		position: absolute;
    	    text-align: center;
    		z-index: 3;
    		border: 1px solid #fff;
    	}
    	
    	.verify-bar-area .verify-move-block .verify-icon {
    		font-size: 18px;
    	}
    	
    	.verify-bar-area .verify-msg {
    		z-index : 3;
    	}
    	
    </style>
    
    <body>
    
    <div id="mpanel4" style="margin-top:50px;">
    </div>
    </body>
    <script type="text/javascript">
    	
    	$('#mpanel4').slideVerify({
    		type : 2,		//类型
    		vOffset : 5,	//误差量,根据需求自行调整
    		vSpace : 5,	//间隔
    		imgName : ['1.jpg', '2.jpg'],
    		imgSize : {
    			width: '400px',
    			height: '200px',
    		},
    		blockSize : {
    			width: '40px',
    			height: '40px',
    		},
    		barSize : {
    			width : '400px',
    			height : '40px',
    		},
    		ready : function() {
    		},
    		success : function() {
    			alert('验证成功,添加你自己的代码!');
    			//......后续操作
    		},
    		error : function() {
    //		        	alert('验证失败!');
    		}
    		
    	});
    	
    </script>
    </html>
    

    关于图片的滑动验证已经结束,下面看一下关于滑动条验证的方式验证。

    二 : 滑动条验证

    效果演示

    原始样式
    在这里插入图片描述
    点击滑动
    在这里插入图片描述
    滑动完毕给出成功的提示
    在这里插入图片描述
    看代码之前**注意:**代码中要引入相应架包

    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    

    代码演示

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/verify.js" ></script>
    </head>
    <style>
    	/*滑动验证码*/
    	.verify-bar-area {
    	    position: relative;
    	    background: #FFFFFF;
    	   	text-align: center;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	   	border: 1px solid #ddd;
    	   	-webkit-border-radius: 4px;
    	}
    	 
    	.verify-bar-area .verify-move-block {
    	    position: absolute;
    	    top: 0px;
    	    left: 0;
    	    background: #fff;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    box-shadow: 0 0 2px #888888;
    	    -webkit-border-radius: 1px;
    	}
    	
    	.verify-bar-area .verify-move-block:hover {
    	    background-color: #337ab7;
    	    color: #FFFFFF;
    	}
    	
    	.verify-bar-area .verify-left-bar {
    	    position: absolute;
    	    top: -1px;
    	    left: -1px;
    	   	background: #f0fff0;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    border: 1px solid #ddd;
    	}	
    	
    </style>
    <body>
    
    <div id="mpanel1" >
    </div>
    
    
    <script type="text/javascript">
    
    	$('#mpanel1').slideVerify({
    		type : 1,		//类型
    		vOffset : 5,	//误差量,根据需求自行调整
    		barSize : {
    			width : '80%',
    			height : '40px',
    		},
    		ready : function() {
    		},
    		success : function() {
    			alert('验证成功,添加你自己的代码!');
    			//......后续操作
    		},
    		error : function() {
    //		        	alert('验证失败!');
    		}
    		
    	});
    	
    </script>
    </body>
    </html>
    
    更多相关内容
  • 滑动验证,拼图验证 简介: .net core平台下的滑动验证,拼图验证模块。可参考示例: 服务端生成校验图片,前端展示,验证用户操作结果。 校验数据存储支持本地内存和redis分布式缓存两种模式,开发调试或单机部署时...
  • jQuery表单提交滑动验证实例是一款基于layui制作简单的表单输入框和拖动滑动验证代码。
  • 获取验证码之前,会做一些验证,防止短信盗刷,很常见的就是滑块验证,图片验证,图片旋转验证,滑动验证
  • 易语言拖拽滑动验证源码,源码通过鼠标模拟操作,实现了验证码拖拽动作。@大司命。
  • vue项目拼图滑动验证组件,经过处理兼容IE及各个浏览器,图片需要自己上传,链接https://blog.csdn.net/Hei_lovely_cat/article/details/106214695
  • java实现滑动验证解锁

    2020-08-18 17:58:16
    主要为大家详细介绍了java实现滑动验证解锁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前端登录页面用的滑动验证 里面包含了所需css和js文件和判断函数
  • 首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码输入框,输入后 点击登陆 弹出验证滑动条 def __init__(self): self.url = 'https://passport.csdn.net/login' self.browser = webdriver.Chrome...
  • 滑动解锁作为一种较新的验证方式,以其方便快捷简单的特点,Swift成为目前较为流行的验证方式;而图片滑动解锁比滑动解锁更加高效安全,成为现代最为流行的用户验证方式 本组件基于 ArronYR / slideunlock-plugin ...
  • 主要为大家详细介绍了Java实现图片滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • php写的原创滑动验证,网络上大部分的滑动拼图验证码是python或者是java写的,这个是纯php写的,下载下来就可以使用。拼图图案自己可以换,不需要去别的什么站申请什么key,也不依赖其他的网站的api,完全独立的一个...
  • 易语言滑动验证识别,成功率在95%上,源码清晰。
  • 一个jQuery写的 拖拽滑动验证码插件 用于登录验证等等等
  • vue实现手机短信验证、滑动验证,vue,等真实可靠,,
  • 使用JQuery制作的一个滑动验证插件,js自动生成HTML和设置CSS不需要引入其他文件,可以通过传参的方式修改滑块的CSS样式,可以传入滑动成功后再执行的方法。使用非常简单,一个页面可以生成多个滑动验证
  • 主要为大家详细介绍了vue简单的一拉到底的滑动验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于C#编写的滑动验证码,包含机器滑动验证,后台校验。入库操作。
  • 突然想到的方法,来试试吧 1.页面布局 <canvas id=canva width=500px height=300px></canvas> 样式 <style type=text/css> *{ margin: 0; padding: 0; } #canva{ background: indianred;... [removed]
  • 主要为大家详细介绍了Android控件SeekBar仿淘宝滑动验证效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 滑动验证,支持H5和PC网页
  • 本篇文章主要介绍了Android自定义滑动验证条的示例代码,具有一定的参考价值,有兴趣的可以了解一下
  • 目前只做了Android studio 的demo 用eclipse的程序猿们只要改下就好
  • 图片滑动验证.zip

    2020-08-24 17:28:12
    javascript图片滑动验证,以ssm项目举例。用于登录或者其他点击按钮的验证,防止恶意点击,资源文件都已打包好,直接以静态资源文件引入即可使用。该功能主要以js的验证,涉及的java代码很少。
  • jquery 滑动验证插件

    2018-05-28 16:05:38
    滑动验证插件-------------------------------------------------------------------------------------------------------------------------------------------------------------------
  • H5滑动验证+H5源码

    2018-05-08 15:55:13
    里面是阿里云的滑动验证的js源码附带的是h5的源码,可以直接使用。
  • 目前网站上的验证码机制可谓是五花八门,有简单的数字验证,有掺杂了字母和文字的混淆验证,还有通过滑块进行的拼图...本文所记载的就是滑动验证里比较常用的使用极验(GEETEST)框架的滑动验证的自动化操作的实现方法。
  • 后端采用python+flask+redis,简易实现图片验证功能,如需复杂验证,请记录鼠标拖动轨迹,后端实现分析,有兴趣的朋友可以试试

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,649
精华内容 20,659
关键字:

滑动验证

友情链接: QAM CODE.zip