圖片滑動驗證碼，邏輯是根據鼠標滑動軌跡，座標位置，計算拖動速度等等來判斷是否人爲操作，當然下面的代碼只是實現前端部分，只記錄了拖動的座標。
先上代碼吧，做個備份記錄
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 = '<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>按住滑塊，拖動完成上方拼圖</span>' +
'</div></div></div>';
$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<dX+$(this).width()-20){
$divMove.css({"left": (x - dX - 20) + "px"});//div動態位置賦值
$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-div").hide();
opts.callback({code:1000,msg:"驗證通過",msgcode:"23dfdf123"});
}else{
$divMove.addClass("error");
checkcoderesult(0,"驗證不通過");
opts.callback({code:1001,msg:"驗證不通過"});
setTimeout(function() {
$divMove.removeClass("error");
$this.find(".code-mask").animate({"left":"0px"},200);
$divMove.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部分：
<div id="imgscode"></div>
<script>
$("#imgscode").imgcode();
</script>效果圖：
