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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript插入样式实现代码
Feb 22 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
使用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 Ubb代码编辑器函数代码
2012/07/05 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
jquery 获取json数据实现代码
2009/04/27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python测试驱动开发实例
2014/10/08 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python实现维吉尼亚算法
2019/03/20 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
利用python计算时间差(返回天数)
2019/09/07 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
python db类用法说明
2020/07/07 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
司机岗位职责
2013/11/15 职场文书
母亲节感恩寄语
2014/02/21 职场文书
党的生日活动方案
2014/08/15 职场文书
800字作文之大雪
2019/12/04 职场文书