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


Posted in Javascript onSeptember 29, 2020

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

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

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插件实现图片滑动验证码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
javascript事件模型代码
Jul 01 Javascript
JS支持带x身份证号码验证函数
Aug 10 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
express 项目分层实践详解
Dec 10 Javascript
js+canvas实现画板功能
Sep 13 Javascript
JS实现购物车基本功能
Nov 08 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 #Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 #Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 #Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 #Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 #Javascript
javascript计算对象长度的方法
Oct 25 #Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 #Javascript
You might like
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python 实现兔子生兔子示例
2019/11/21 Python
python 实现二维列表转置
2019/12/02 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
员工生日会策划方案
2014/06/14 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
市场督导岗位职责
2015/04/10 职场文书
酒店员工手册范本
2015/05/14 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python