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

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

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

jquery.lgymove.js

/** *由lgy于2017年10月21日创建。* 图片验证码*/(函数($) { $.fn.imgcode=函数（选项){ //初始化参数定义变量默认值={ callback:'' //回调函数};var opts=$ .扩展（默认值、选项);返回这个。每个(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=' http :/img/前(1)。png '/div ' img src=' http :/img/back(1).png '/div ' div class=' code-push ' I class=' icon-log in-BG icon-w-25 icon-push '刷新/ispan class=' code-tip '/span/div ' '/div ' ' class=' code-BTN ' ' ' div class=' code-BTN-img code-BTN-m '/div ' ' span按住滑块，拖动完成上方拼图/span ' '/div/div/div '；这个。html(html)；//定义拖动参数var $divMove=$(this).查找('。代码-BTN-img ')；//拖动按钮var $ DivWarp=$(this).查找('。代码-BTN ')；//鼠标可拖拽区域var mX=0，mY=0；//定义鼠标X轴Y轴var dX=0，Dy=0；//定义滑动区域左、上位置var isDown=false//鼠标放下标记if(document.attachEvent) {//ie的事件监听，拖拽差异时禁止选中内容，火狐与铬已在钢性铸铁中设置过蚊子用户-选择：无；-网络工具包-用户-选择：无；$divMove[0].attachEvent('onselectstart '，function(){ return false；});} //按钮拖动事件$divMove.on({ mousedown:函数(e) { //清除提示信息$this.find(.代码提示')。html(" ")；var event=e | | window . event MX=event . pagexdx=$ divwrap . offset().向左；dY=$ divWrap.offset().顶部；isDown=true//鼠标拖拽启$(这个)。添加CLaSS(' active ')；//修改按钮阴影$ DivMoVE。CSS({ ' box-shadow ' : ' 0 0 8px # 666 ' })；} });//鼠标点击松手事件$(文档)。mouseup(函数(e) { var lastX=$this.find '。代码掩码')。偏移量()。左-Dx-1；isDown=false//鼠标拖拽启$ DivMoVE。移除类(“活动的”)；//还原按钮阴影$ DivMoVE。CSS({ ' box-shadow ' : ' 0 0 3px # CCC ' })；校验码(LasTx)；});//滑动事件$divWrap.mousemove(函数（事件){ var event=event | | window . event var x=event.pageX//鼠标滑动时的X轴if(IsDown){ if(x(dX 30)xdX $(this)} .width()-20){ $ div move。CSS({ ' left ' :(x-dX-20)' px ' })；//div动态位置赋值$this.find(.代码掩码')。CSS({ ' left ' :(x-Dx-30)' px ' })；} } });//验证数据函数校验码(code){ var为cur=false//模拟Ajax setTimeout(函数(){ if(iscur){ checkcoderesult(1)，'验证通过');$this.find(.代码-k-div ').hide()；opts.callback({code:1000，msg: '验证通过，msg code : ' 23 fdf 123 ' })；}else{ $divMove.addClass('错误');checkcoderesult(0，验证不通过');opts.callback({code:1001，msg: '验证不通过'});setTimeout(函数(){ $divMove.removeClass('错误');$this.find(.代码掩码')。动画({'left':'0px'}，200)；$ DivMoVE。动画({ ' left ' : ' 10px ' }，200)；},400);} },500) } //验证结果function checkcoderesult(i，txt){ if(i==0){ $this.find(' .代码提示')。add CLaSS(' code-tip-red ')；}else{ $this.find(' .代码提示')。添加CLaSS(' code-tip-green ')；} $this.find(' .代码提示')。html(txt)；} })})))(jQuery)；钢性铸铁部分：代码_bg{ position:固定；top :0 left : 0；右：0底部：0;背景-color: rgba(0，0，0，5);z指数： 99；} .图标-登录-bg{后台-图像：网址(./img/icon/loginicon。巴布亚新几内亚)；背景-重复：不重复；} .代码-con{ position:绝对值；top:100px宽度： 320 px左侧： 50%;边距-左侧：-160像素；背景-color : # fff；z指数： 100；蚊子用户-选择：无；-网络工具包-用户-选择：无；} .代码-img { margin : 5px 5px；padding: 5px 5px背景-颜色： # f5f 6f 7；} .代码-img img {显示屏： }块；} .icon-w-25 { display : inline-block；宽度： 25px高度： 25px文本-缩进：-9999像素；} .图标-按下{光标：指针；背景-位置：-149 px-95px；} .代码推送{ height: 25px}。代码-BTN {位置：相对；高度： 30px文本对齐：中心；color : # 999 margin : 10px 10px盒子尺寸：边框盒子；背景-颜色： # f5f 6f 7；边框半径： 15pxborder: 1px固体# e1e1e1}。代码-BTN-m {位置：绝对；宽度： 40px高度： 40px边界半径： 50%;背景-颜色： # f5f 6f 7；border: 1px固体# E1 e1z-索引： 5；top :-8px；left : 10pxbox-shadow : 0 3px # CCC；光标：指针；背景-位置：-63px 10px；} .代码-BTN-img {背景图像： URL(./img/icon/codejt。巴布亚新几内亚)；背景-重复：不重复；} .代码-BTN-img。活动{背景-位置：-134 px 10px；} .代码-BTN-img。错误{背景-位置： 8px 10px} .代码-img-con {相对位置：} .代码掩码{位置：绝对值；top :0 left : 0；z指数： 10；} .代码提示{左填充： 10pxfont-size : 12pxcolor: # 999}。代码-提示-红色{ color:红色；} .代码-提示-绿色{ color:绿色；} html部分：

div id=' imgscode '/div script $(' # imgscode ').img代码()；/script效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。