/** 
 * Created by lgy on 2017/10/21. 
 * 圖片驗(yàn)證碼 
 */ 
(function ($) { 
 $.fn.imgcode = function (options) { 
 //初始化參數(shù) 
 var defaults = { 
  callback:"" //回調(diào)函數(shù) 
 }; 
 var opts = $.extend(defaults, options); 
 return this.each(function () { 
  var $this = $(this);//獲取當(dāng)前對象 
  var html = '<div class="code-k-div">' + 
  '<div class="code_bg"></div>' + 
  '<div class="code-con">' + 
  '<div class="code-img">' + 
  '<div class="code-img-con">' + 
  '<div class="code-mask"><img src="../img/front(1).png"></div>' + 
  '<img src="../img/back(1).png"></div>' + 
  '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' + 
  '</div>' + 
  '<div class="code-btn">' + 
  '<div class="code-btn-img code-btn-m"></div>' + 
  '<span>按住滑塊，拖動(dòng)完成上方拼圖</span>' + 
  '</div></div></div>'; 
  $this.html(html); 
 
  //定義拖動(dòng)參數(shù) 
  var $divMove = $(this).find(".code-btn-img"); //拖動(dòng)按鈕 
  var $divWrap = $(this).find(".code-btn");//鼠標(biāo)可拖拽區(qū)域 
  var mX = 0, mY = 0;//定義鼠標(biāo)X軸Y軸 
  var dX = 0, dY = 0;//定義滑動(dòng)區(qū)域左、上位置 
  var isDown = false;//mousedown標(biāo)記 
  if(document.attachEvent) {//ie的事件監(jiān)聽，拖拽div時(shí)禁止選中內(nèi)容，firefox與chrome已在css中設(shè)置過-moz-user-select: none; -webkit-user-select: none; 
  $divMove[0].attachEvent('onselectstart', function() { 
   return false; 
  }); 
  } 
  //按鈕拖動(dòng)事件 
  $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;//鼠標(biāo)拖拽啟 
   $(this).addClass("active"); 
   //修改按鈕陰影 
   $divMove.css({"box-shadow":"0 0 8px #666"}); 
  } 
  }); 
  //鼠標(biāo)點(diǎn)擊松手事件 
  $(document).mouseup(function (e) { 
  var lastX = $this.find(".code-mask").offset().left - dX - 1; 
  isDown = false;//鼠標(biāo)拖拽啟 
  $divMove.removeClass("active"); 
  //還原按鈕陰影 
  $divMove.css({"box-shadow":"0 0 3px #ccc"}); 
  checkcode(lastX); 
  }); 
  //滑動(dòng)事件 
  $divWrap.mousemove(function (event) { 
  var event = event || window.event; 
  var x = event.pageX;//鼠標(biāo)滑動(dòng)時(shí)的X軸 
  if (isDown) { 
   if(x>(dX+30) && x<dX+$(this).width()-20){ 
   $divMove.css({"left": (x - dX - 20) + "px"});//div動(dòng)態(tài)位置賦值 
   $this.find(".code-mask").css({"left": (x - dX-30) + "px"}); 
   } 
  } 
  }); 
  //驗(yàn)證數(shù)據(jù) 
  function checkcode(code){ 
  var iscur=false; 
  //模擬ajax 
  setTimeout(function(){ 
   if(iscur){ 
   checkcoderesult(1,"驗(yàn)證通過"); 
   $this.find(".code-k-div").hide(); 
   opts.callback({code:1000,msg:"驗(yàn)證通過",msgcode:"23dfdf123"}); 
   }else{ 
   $divMove.addClass("error"); 
   checkcoderesult(0,"驗(yàn)證不通過"); 
   opts.callback({code:1001,msg:"驗(yàn)證不通過"}); 
   setTimeout(function() { 
    $divMove.removeClass("error"); 
    $this.find(".code-mask").animate({"left":"0px"},200); 
    $divMove.animate({"left": "10px"},200); 
   },400); 
   } 
  },500) 
  } 
  //驗(yàn)證結(jié)果 
  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); 

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

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