图片滑动验证码怎样实现

这次给大家带来图片滑动验证码怎样实现，图片滑动验证码实现的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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 = '<p class="code-k-p">' + 
    '<p class="code_bg"></p>' + 
    '<p class="code-con">' + 
    '<p class="code-img">' + 
    '<p class="code-img-con">' + 
    '<p class="code-mask"><img src="../img/front(1).png"></p>' + 
    '<img src="../img/back(1).png"></p>' + 
    '<p class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></p>' + 
    '</p>' + 
    '<p class="code-btn">' + 
    '<p class="code-btn-img code-btn-m"></p>' + 
    '<span>按住滑块，拖动完成上方拼图</span>' + 
    '</p></p></p>'; 
   $this.html(html); 
 
   //定义拖动参数 
   var $pMove = $(this).find(".code-btn-img"); //拖动按钮 
   var $pWrap = $(this).find(".code-btn");//鼠标可拖拽区域 
   var mX = 0, mY = 0;//定义鼠标X轴Y轴 
   var dX = 0, dY = 0;//定义滑动区域左、上位置 
   var isDown = false;//mousedown标记 
   if(document.attachEvent) {//ie的事件监听，拖拽p时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none; 
    $pMove[0].attachEvent('onselectstart', function() { 
     return false; 
    }); 
   } 
   //按钮拖动事件 
   $pMove.on({ 
    mousedown: function (e) { 
     //清除提示信息 
     $this.find(".code-tip").html(""); 
     var event = e || window.event; 
     mX = event.pageX; 
     dX = $pWrap.offset().left; 
     dY = $pWrap.offset().top; 
     isDown = true;//鼠标拖拽启 
     $(this).addClass("active"); 
     //修改按钮阴影 
     $pMove.css({"box-shadow":"0 0 8px #666"}); 
    } 
   }); 
   //鼠标点击松手事件 
   $(document).mouseup(function (e) { 
    var lastX = $this.find(".code-mask").offset().left - dX - 1; 
    isDown = false;//鼠标拖拽启 
    $pMove.removeClass("active"); 
    //还原按钮阴影 
    $pMove.css({"box-shadow":"0 0 3px #ccc"}); 
    checkcode(lastX); 
   }); 
   //滑动事件 
   $pWrap.mousemove(function (event) { 
    var event = event || window.event; 
    var x = event.pageX;//鼠标滑动时的X轴 
    if (isDown) { 
     if(x>(dX+30) && x<dX+$(this).width()-20){ 
      $pMove.css({"left": (x - dX - 20) + "px"});//p动态位置赋值 
      $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-p").hide(); 
      opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"}); 
     }else{ 
      $pMove.addClass("error"); 
      checkcoderesult(0,"验证不通过"); 
      opts.callback({code:1001,msg:"验证不通过"}); 
      setTimeout(function() { 
       $pMove.removeClass("error"); 
       $this.find(".code-mask").animate({"left":"0px"},200); 
       $pMove.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部分：

<p id="imgscode"></p> 
<script> 
$("#imgscode").imgcode(); 
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

开源JS插件框架MinimaJS使用介绍

angularjs带有添加删除选项二级联动

以上就是图片滑动验证码怎样实现的详细内容，更多请关注其它相关文章！