图片滑动验证码怎样实现

来源：互联网 2024-10-17 21:49:58

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

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

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

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>' +     '</p><p></p>' +     '<p>' +     '</p><p>' +     '</p><p>' +     '</p><p><img  alt="图片滑动验证码怎样实现" ></p>' +     '<img  alt="图片滑动验证码怎样实现" >' +     '<p><i>刷新</i><span></span></p>' +     '' +     '<p>' +     '</p><p></p>' +     '<span>按住滑块，拖动完成上方拼图</span>' +     '';    $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-ｓｅｌｅｃｔ: none; -webkit-user-ｓｅｌｅｃｔ: 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&gt;(dX+30) &amp;&amp; x<dx><p style="text-align: left;">css部分：</p><pre class="brush:php;toolbar:false">.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-ｓｅｌｅｃｔ: none;  -webkit-user-ｓｅｌｅｃｔ: 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></p> <ｓｃｒｉｐｔ> $("#imgscode").imgcode(); </ｓｃｒｉｐｔ>

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