当前位置: 首页 > 编程笔记 >

js插件实现图片滑动验证码

东方淇
2023-03-14
本文向大家介绍js插件实现图片滑动验证码,包括了js插件实现图片滑动验证码的使用技巧和注意事项,需要的朋友参考一下

图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标。

先上代码吧,做个备份记录

jquery.lgymove.js

/** 
 * Created by lgy on 2017/10/21. 
 * 图片验证码 
 */ 
(function ($) { 
 $.fn.imgcode = function (options) { 
 //初始化参数 
 var defaults = { 
  callback:"" //回调函数 
 }; 
 var opts = $.extend(defaults, options); 
 return this.each(function () { 
  var $this = $(this);//获取当前对象 
  var html = '<div class="code-k-div">' + 
  '<div class="code_bg"></div>' + 
  '<div class="code-con">' + 
  '<div class="code-img">' + 
  '<div class="code-img-con">' + 
  '<div class="code-mask"><img src="../img/front(1).png"></div>' + 
  '<img src="../img/back(1).png"></div>' + 
  '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' + 
  '</div>' + 
  '<div class="code-btn">' + 
  '<div class="code-btn-img code-btn-m"></div>' + 
  '<span>按住滑块,拖动完成上方拼图</span>' + 
  '</div></div></div>'; 
  $this.html(html); 
 
  //定义拖动参数 
  var $divMove = $(this).find(".code-btn-img"); //拖动按钮 
  var $divWrap = $(this).find(".code-btn");//鼠标可拖拽区域 
  var mX = 0, mY = 0;//定义鼠标X轴Y轴 
  var dX = 0, dY = 0;//定义滑动区域左、上位置 
  var isDown = false;//mousedown标记 
  if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none; 
  $divMove[0].attachEvent('onselectstart', function() { 
   return false; 
  }); 
  } 
  //按钮拖动事件 
  $divMove.on({ 
  mousedown: function (e) { 
   //清除提示信息 
   $this.find(".code-tip").html(""); 
   var event = e || window.event; 
   mX = event.pageX; 
   dX = $divWrap.offset().left; 
   dY = $divWrap.offset().top; 
   isDown = true;//鼠标拖拽启 
   $(this).addClass("active"); 
   //修改按钮阴影 
   $divMove.css({"box-shadow":"0 0 8px #666"}); 
  } 
  }); 
  //鼠标点击松手事件 
  $(document).mouseup(function (e) { 
  var lastX = $this.find(".code-mask").offset().left - dX - 1; 
  isDown = false;//鼠标拖拽启 
  $divMove.removeClass("active"); 
  //还原按钮阴影 
  $divMove.css({"box-shadow":"0 0 3px #ccc"}); 
  checkcode(lastX); 
  }); 
  //滑动事件 
  $divWrap.mousemove(function (event) { 
  var event = event || window.event; 
  var x = event.pageX;//鼠标滑动时的X轴 
  if (isDown) { 
   if(x>(dX+30) && x<dX+$(this).width()-20){ 
   $divMove.css({"left": (x - dX - 20) + "px"});//div动态位置赋值 
   $this.find(".code-mask").css({"left": (x - dX-30) + "px"}); 
   } 
  } 
  }); 
  //验证数据 
  function checkcode(code){ 
  var iscur=false; 
  //模拟ajax 
  setTimeout(function(){ 
   if(iscur){ 
   checkcoderesult(1,"验证通过"); 
   $this.find(".code-k-div").hide(); 
   opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"}); 
   }else{ 
   $divMove.addClass("error"); 
   checkcoderesult(0,"验证不通过"); 
   opts.callback({code:1001,msg:"验证不通过"}); 
   setTimeout(function() { 
    $divMove.removeClass("error"); 
    $this.find(".code-mask").animate({"left":"0px"},200); 
    $divMove.animate({"left": "10px"},200); 
   },400); 
   } 
  },500) 
  } 
  //验证结果 
  function checkcoderesult(i,txt){ 
  if(i==0){ 
   $this.find(".code-tip").addClass("code-tip-red"); 
  }else{ 
   $this.find(".code-tip").addClass("code-tip-green"); 
  } 
  $this.find(".code-tip").html(txt); 
  } 
 }) 
 } 
})(jQuery); 

css部分:

.code_bg{ 
 position: fixed; 
 top:0; 
 left: 0; 
 right:0; 
 bottom:0; 
 background-color: rgba(0,0,0,.5); 
 z-index: 99; 
} 
.icon-login-bg{ 
 background-image: url(../img/icon/loginicon.png); 
 background-repeat: no-repeat; 
} 
.code-con{ 
 position: absolute; 
 top:100px; 
 width: 320px; 
 left: 50%; 
 margin-left: -160px; 
 background-color: #fff; 
 z-index: 100; 
 -moz-user-select: none; 
 -webkit-user-select: none; 
} 
.code-img{ 
 margin: 5px 5px; 
 padding: 5px 5px; 
 background-color: #f5f6f7; 
} 
.code-img img{ 
 display: block; 
} 
.icon-w-25{ 
 display: inline-block; 
 width: 25px; 
 height: 25px; 
 text-indent: -9999px; 
} 
.icon-push{ 
 cursor: pointer; 
 background-position: -149px -95px; 
} 
.code-push{ 
 height: 25px; 
} 
.code-btn{ 
 position: relative; 
 height: 30px; 
 text-align: center; 
 color: #999; 
 margin: 10px 10px; 
 box-sizing: border-box; 
 background-color: #f5f6f7; 
 border-radius: 15px; 
 border: 1px solid #e1e1e1; 
} 
.code-btn-m{ 
 position: absolute; 
 width: 40px; 
 height: 40px; 
 border-radius: 50%; 
 background-color: #f5f6f7; 
 border: 1px solid #e1e1e1; 
 z-index: 5; 
 top:-8px; 
 left: 10px; 
 box-shadow: 0 0 3px #ccc; 
 cursor: pointer; 
 background-position: -63px 10px; 
} 
.code-btn-img{ 
 background-image:url(../img/icon/codejt.png); 
 background-repeat: no-repeat; 
} 
.code-btn-img.active{ 
 background-position: -134px 10px; 
} 
.code-btn-img.error{ 
 background-position: 8px 10px; 
} 
.code-img-con{ 
 position: relative; 
} 
.code-mask{ 
 position: absolute; 
 top:0; 
 left: 0; 
 z-index: 10; 
} 
.code-tip{ 
 padding-left: 10px; 
 font-size: 12px; 
 color: #999; 
} 
.code-tip-red{ 
 color: red; 
} 
.code-tip-green{ 
 color: green; 
} 

html部分:

<div id="imgscode"></div> 
<script> 
$("#imgscode").imgcode(); 
</script> 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js+java实现登录滑动图片验证,包括了js+java实现登录滑动图片验证的使用技巧和注意事项,需要的朋友参考一下 最新需要公司要求在不改变原来的登录逻辑的情况下,将原来的验证码登录的形式改成滑动图片的形式!下面是做出来的效果: 实现思路:所有的图片数据,验证全部由后端来做。前端调用接口,后端会返回两张经过base64加密的图片信息,分别是背景图片和滑块图片,前端滑动滑块以后将X方

  • 本文向大家介绍html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】,包括了html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】的使用技巧和注意事项,需要的朋友参考一下 电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件,通过鼠标拖动或触屏滑动填充拼图来进行安全验证,点击刷新可以更换当前待验证的图片。 HTML & css: 附录1:需要注意css和js的引用

  • 本文向大家介绍js+h5 canvas实现图片验证码,包括了js+h5 canvas实现图片验证码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下 实现效果 一、使用技术 原生js技术+html5 canvas画图 利用Math.random()函数随机生成 颜色 字符串  及障碍物 点击 验证码可变更验证码图

  • 本文向大家介绍Python实现图片滑动式验证识别方法,包括了Python实现图片滑动式验证识别方法的使用技巧和注意事项,需要的朋友参考一下 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中。传统的字符型验证安全性已经名存实亡的情况下,各种新型的验证码如雨后春笋般涌现。目前最常见的一种形式就是“滑动拼图式” 2 内容概述 关于滑动式验证,最早由国

  • 本文向大家介绍javascript图片滑动效果实现,包括了javascript图片滑动效果实现的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: css: js操作: 更多关于滑动效果的专题,请点击下方链接查看: javascript滑

  • 本文向大家介绍java Servlet 实现动态验证码图片示例,包括了java Servlet 实现动态验证码图片示例的使用技巧和注意事项,需要的朋友参考一下 整理文档,搜刮出一个java Servlet 实现动态验证码图片的代码,稍微整理精简一下做下分享。 当然这还需要改进成平常见到的验证码 形式,还需要努力 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。