집 >웹 프론트엔드 >JS 튜토리얼 >Node.js 플러그인은 이미지 슬라이딩 인증 코드 예시 공유를 구현합니다.

Node.js 플러그인은 이미지 슬라이딩 인증 코드 예시 공유를 구현합니다.

小云云원래의: 2018-05-10 17:33:285545검색

그림 슬라이딩 검증 코드, 로직은 마우스 슬라이딩 궤적, 좌표 위치, 드래그 속도 계산 등을 바탕으로 사람의 조작 여부를 판단하는 것입니다. 물론 다음 코드는 프런트엔드 부분만 구현하고 기록만 합니다. 드래그 좌표. 이 글에서는 주로 그림 슬라이딩 검증 코드를 구현하는 js 플러그인과 검증 기능을 구현하는 슬라이딩 모듈을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

코드부터 시작해서 백업 기록을 만들어 봅시다

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);

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>

렌더링:

위의 아이디어를 따르세요 모두에게 도움이 되기를 바랍니다. 시도해 볼 수 있습니다.

Node.js 플러그인은 이미지 슬라이딩 인증 코드 예시 공유를 구현합니다.

관련 기사