阿坝州网站建设公司

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

这篇文章将为大家详细讲解有关js插件如何实现图片滑动验证码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站致力于互联网品牌建设与网络营销，包括成都做网站、网站设计、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联建站为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联建站核心团队十年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

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 = '' + 
    '
' +      '' +      '' +      '' +      '
' +      '
' +      '刷新
' +      '' +      '' +      '' +      '按住滑块，拖动完成上方拼图' +      '';     $this.html(html);       //定义拖动参数     var $divMove = $(this).find(".code-btn-img"); //拖动按钮     var $divWrap = $(this).find(".code-btn");//鼠标可拖拽区域     var mX = 0, mY = 0;//定义鼠标X轴Y轴     var dX = 0, dY = 0;//定义滑动区域左、上位置     var isDown = false;//mousedown标记     if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;      $divMove[0].attachEvent('onselectstart', function() {       return false;      });     }     //按钮拖动事件     $divMove.on({      mousedown: function (e) {       //清除提示信息       $this.find(".code-tip").html("");       var event = e || window.event;       mX = event.pageX;       dX = $divWrap.offset().left;       dY = $divWrap.offset().top;       isDown = true;//鼠标拖拽启       $(this).addClass("active");       //修改按钮阴影       $divMove.css({"box-shadow":"0 0 8px #666"});      }     });     //鼠标点击松手事件     $(document).mouseup(function (e) {      var lastX = $this.find(".code-mask").offset().left - dX - 1;      isDown = false;//鼠标拖拽启      $divMove.removeClass("active");      //还原按钮阴影      $divMove.css({"box-shadow":"0 0 3px #ccc"});      checkcode(lastX);     });     //滑动事件     $divWrap.mousemove(function (event) {      var event = event || window.event;      var x = event.pageX;//鼠标滑动时的X轴      if (isDown) {       if(x>(dX+30) && x

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部分：

 

效果图：

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

关于“js插件如何实现图片滑动验证码”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


标题名称：js插件如何实现图片滑动验证码
转载注明：http://azwzsj.com/article/jhdjcs.html

其他资讯