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 相关文章推荐
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
复制js对象方法(详解)
Jul 08 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
微信支付开发订单查询实例
2016/07/12 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python openpyxl模块的使用详解
2021/02/25 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
库房主管岗位职责
2013/12/31 职场文书
护理不良事件检讨书
2014/02/06 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
个人安全承诺书
2014/05/22 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL