jquery 滑动验证码

最新推荐文章于 2024-06-12 22:04:43 发布
最新推荐文章于 2024-06-12 22:04:43 发布
阅读量9.9k 收藏 2
点赞数 2
分类专栏： jquery 文章标签： 验证码

html代码

<!DOCTYPE html>
<html>
<head>
<title>jQuery仿淘宝网拖动滑块验证码</title>
<meta charset="utf-8">
<link href="__PUBLIC__/css/drag.css" rel="stylesheet" type="text/css">
<script  type="text/javascript" src="__PUBLIC__/js/jquery-1.9.1.min.js"></script>
<script src="__PUBLIC__/js/drag.js" type="text/javascript"></script>
</head>
<body>


<center><br><br><br><div id="drag"></div></center>


<script type="text/javascript">
$('#drag').drag();
</script>


<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>


css代码文件drag.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("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;
}
#drag .drag_bg{
    background-color: #7ac23c;
    height: 34px;
    width: 0px;
}
#drag .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; 
}


js代码文件drag.js

/* 
 * drag 1.0
 * create by tony@jentian.com
 * date 2015-08-18
 * 拖动滑块
 */
(function($){
    $.fn.drag = function(options){
        var x, drag = this, isMove = false, defaults = {
        };
        var options = $.extend(defaults, options);
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>'+
                    '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
                    '<div class="handler handler_bg"></div>';
        this.append(html);
        
        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;
            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.text('验证通过');
            drag.css({'color': '#fff'});
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
        }
    };
})(jQuery);





                

        

        

    




    

      

        

            

              
                
                  羊崽
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery滑动验证码

				
			

			

				

					04-30
				

			

		

		

			
				
jquery滑动验证码，支持字符验证、滑动验证，点击验证

			
		

	



                

              
                



	

		

			

				
					
jQuery 基于slidercaptcha.js滑块式验证码插件支持移动端.rar

				
			

			

				

					04-03
				

			

		

		

			
				
这是一款支持移动端的jQuery滑块式验证码插件。用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证

			
		

	



                


  
              

                


	

		

			

				
					
.NET 6 实现滑动验证码（十）、大结局：前端代码实战，vue3与HTML+JQuery

				
			

			

				

					What If...
				

				

					11-23
					
					8466
					
				

			

		

		

			
				
这篇文章介绍前端代码的搭建，在实际应用中，我有写过两种类型的前端，一个是vue3的，一个是纯HTML+JQuery的

			
		

	





	

		

			

				
					
前后端滑块验证码实例附源码（java jquery）

				
			

			

				

					叶落自飘零的博客
				

				

					10-24
					
					6242
					
				

			

		

		

			
				
背景：

    发送短信验证码或者登录等场景操作之前都需要进行图片验证码校验或者滑块验证码校验；此举是为了减少黑盒对服务端进行暴力破解密码或者频发短信轰炸请求的操作；

   但如果滑块验证完全由前端进行操作，实际上是不能很好的进行黑盒测试的防御，很容易绕过，所以在这里推出一个前后端结合滑块验证码的实例；

步骤：

后台生成背景图+模版抠图+抠图横坐标+抠图纵坐标；
	后台生成...

			
		

	



		

			
		



	

		

			

				
					
滑动验证码的完整指南

					
最新发布

				
			

			

				

					2401_85453501的博客
				

				

					06-12
					
					294
					
				

			

		

		

			
				
我们可以使用请求转发工具，如Burp Suite，来拦截这些请求并分析其中的参数。u 参数是滑块的滑动距离，而 h 参数的生成相对复杂一些。最后，我们将使用破解得到的参数构造请求，以通过滑动验证码的验证。这个过程包括发送 AJAX 请求和获取滑动验证的基本数据，然后计算参数并再次发送请求进行验证。// 构造请求获取滑块验证的基本数据。// 发送 AJAX 请求。// 发送请求的代码示例。// 解析响应的代码示例。// 计算参数的代码示例。// 发送 AJAX 请求。// 计算参数并返回。

			
		

	





	

		

			

				
					
html+jQuery实现拖动滑块图片拼图验证码插件，移动端适用

					
热门推荐

				
			

			

				

					免费网络加-速-器游戏加/速/器
				

				

					07-09
					
					4万+
					
				

			

		

		

			
				
电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，

通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前待验证的图片。






HTML & css：


<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta ht...

			
		

	





	

		

			

				
					
jQuery滑动验证码

				
			

			

				

					11-27
				

			

		

		

			
				
jQuery滑动验证码，传统的字符输入验证码，变为了滑动验证码

			
		

	





	

		

			

				
					
移动端jQuery拖拽滑动验证码插件

				
			

			

				

					06-01
				

			

		

		

			
				
"移动端jQuery拖拽滑动验证码插件"是为了解决这个问题而设计的，它允许用户通过简单的滑动操作来完成验证，提高了用户体验，同时保持了必要的安全标准。  滑动验证码的实现基于JavaScript（JS）和jQuery库，这两个...

			
		

	





	

		

			

				
					
jQuery拖拽滑动验证码插件

				
			

			

				

					03-19
				

			

		

		

			
				
这里我们关注的是一个基于jQuery的拖拽滑动验证码插件，它为网站提供了一种交互性强且用户体验良好的验证方式。下面将详细阐述这个插件的工作原理、实现方法以及可能的应用场景。  首先，jQuery是一个广泛使用的...

			
		

	





	

		

			

				
					
jQuery拖拽滑动验证码插件 slideunlock.js

				
			

			

				

					09-05
				

			

		

		

			
				
在jQuery中实现滑动验证码，通常需要结合HTML、JavaScript（尤其是jQuery库）和CSS来完成。`slideunlock.js`是一个专门为此目的设计的插件，它可以方便地在网页中添加拖拽滑动验证功能。然而，原版的`slideunlock.js...

			
		

	





	

		

			

				
					
jq实现滑动通过验证

				
			

			

				

					kukulei2211的博客
				

				

					07-13
					
					534
					
				

			

		

		

			
				
效果如下：


代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <

			
		

	





	

		

			

				
					
jq实现验证码

				
			

			

				

					10-12
				

			

		

		

			
				
jq 实现验证码

			
		

	





	

		

			

				
					
滑动图片验证码

				
			

			

				

					09-27
				

			

		

		

			
				
jquery写的滑块验证码 ，兼容IE浏览器,可以直接在项目中套用

			
		

	





	

		

			

				
					
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

				
			

			

				

					12-09
				

			

		

		

			
				
电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前待验证的图片。
HTML & css：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动滑块图片拼图验证

			
		

	





	

		

			

				
					
易语言腾讯滑块验证码识别源码（通过精易浏览器模拟滑动）


				
			

			

				

					05-29
				

			

		

		

			
				
易语言腾讯滑块验证码识别源码（通过精易浏览器模拟滑动）。修改的版本,他的滑动多了会出繁忙,修复了,找不到出处了,如果找到请私信我,我加上出处,识别率还可以,缺点是只能单线程。精易浏览器库用的1.6版本。@zxs。Tags：腾讯滑块验证码模块源码腾讯滑块识别腾讯滑块识别算法。


			
		

	





	

		

			

				
					
js实现滑动条的简单验证

				
			

			

				

					光头强的博客
				

				

					07-11
					
					9871
					
				

			

		

		

			
				
效果图：



一般很多网站都有滑动条的验证，我是从站长素材上下载的。

给大家一个下载网址：http://sc.chinaz.com/jiaoben/160330568920.htm

下载好后解压压缩包：

找到drag.js文件：



注意上方的两张效果图，有没有发现拖动前和拖动后的字都不一样，拖动前的字是：拖动滑块验证。拖动后的字是：验证通过。给它设置一个id，名为haha,目的就是来接...

			
		

	





	

		

			

				
					
滑块验证码

				
			

			

				

					weixin_42670714的博客
				

				

					04-20
					
					1672
					
				

			

		

		

			
				
注：本代码非最终版，存在很大的优化空间，有兴趣的同学请自行优化
样式：

背景：
  必须要有一个过滤短信验证码的请求的功能，业务觉得图形验证码太丑，当时市场上的图形验证码是要钱的，甲方自己的验证码系统更丑、且效率低下，因为之前考虑过做个滑块没但时间搞，于是趁此良机搞一下嘛。
优化思路
  原图大小100k，我不太懂图片压缩的知识，用的是人家在线提供的图片压缩，如果再压缩会影响图片的分辨率，但是我...

			
		

	





	

		

			

				
					
pc  php 滑动验证码,jquery实现pc端滑动验证

				
			

			

				

					weixin_35452206的博客
				

				

					03-24
					
					346
					
				

			

		

		

			
				
jquery实现pc端滑动验证这个插件可以放在我们的项目中使用，对jquery有兴趣的朋友可以研究研究，免费提供源码~这也是我们学习jquery的一种方法。代码：PHP中文网#drag{position: relative;background-color: #e8e8e8;width: 300px;height: 34px;line-height: 34px;text-align: center...

			
		

	





	

		

			

				
					
滑块验证，jquery实例的方法封装，验证登录，(支持PC端和移动端)

				
			

			

				

					Baby_加油_的博客
				

				

					02-02
					
					5336
					
				

			

		

		

			
				
问题：

在工作中，为了防止别人刷接口，难免会遇到滑动验证。我在网上找个相关的代码，是经过jquery实例的方法封装，相对简单易学，我在这里进行了基本的解析 
源码请看：码云链接



这里主要说一说jquery实例的封装



/* 封装基本架子 */
/* jQuery, window, document */
(function(t, i, s) {
    var l = function

			
		

	





	

		

			

				
					
jquery图片验证码

				
			

			

				

					08-29
				

			

		

		

			
				
可以使用jQuery来实现图片验证码功能。以下是一个简单的示例：  HTML部分： ```html     验证码  请输入验证码">  验证码">  刷新验证码    提交  ```  JavaScript部分： ```javascript // 刷新验证码 $('#...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值