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 目录列举函数
Nov 06 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 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读取目录下所有文件的代码
2008/01/07 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
简单的分页代码js实现
2016/05/17 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python help()函数用法详解
2014/03/11 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python3.7.0的安装步骤
2018/08/27 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python中温度单位转换的实例方法
2020/12/27 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
志愿者服务感言
2014/02/27 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python