Le plug-in js implémente le partage d'exemples de code de vérification par glissement d'image

Code de vérification du glissement d'image, la logique est de juger s'il s'agit d'une opération humaine basée sur la trajectoire de glissement de la souris, la position des coordonnées, le calcul de la vitesse de traînée, etc. Bien entendu, le code suivant n'implémente que la partie frontale et enregistre uniquement les coordonnées de traînée. Cet article présente principalement le plug-in js pour implémenter en détail le code de vérification du glissement d'image et le module coulissant pour réaliser la fonction de vérification. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.

Commençons par le code et faisons un enregistrement de sauvegarde

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 = &#39;<p class="code-k-p">&#39; + 
    &#39;<p class="code_bg"></p>&#39; + 
    &#39;<p class="code-con">&#39; + 
    &#39;<p class="code-img">&#39; + 
    &#39;<p class="code-img-con">&#39; + 
    &#39;<p class="code-mask"><img src="../img/front(1).png"></p>&#39; + 
    &#39;<img src="../img/back(1).png"></p>&#39; + 
    &#39;<p class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></p>&#39; + 
    &#39;</p>&#39; + 
    &#39;<p class="code-btn">&#39; + 
    &#39;<p class="code-btn-img code-btn-m"></p>&#39; + 
    &#39;<span>按住滑块，拖动完成上方拼图</span>&#39; + 
    &#39;</p></p></p>&#39;; 
   $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(&#39;onselectstart&#39;, 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);

partie 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; 
}

Partie HTML :

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

Rendu :

J'espère que cela pourra aider tout le monde en fonction de les idées ci-dessus, vous pouvez l'essayer vous-même.

Recommandations associées :

jQuery Ajax affiche les bons et les mauvais numéros pour vérifier si le code de vérification d'entrée est correct

Mobile Fonction de compte à rebours du téléphone pour envoyer le code de vérification lors de l'inscription

Comment utiliser php pour envoyer le code de vérification par SMS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!