jquery实现滑动验证
效果如图：
结构：
js：主要是通过计算滑动的div的位置
可以通过数组对象举例（每个对象中给一个背景图和一个滑块，自己可以随便给，只要保证路径正确即可）
var imgArr = [{
"bgimg": "./css/img/bgBigPic1.jpg",
"hdimg": "./css/img/bgSmallPic1.jpg"
}, {
"bgimg": "./css/img/bgBigPic2.jpg",
"hdimg": "./css/img/bgSmallPic2.jpg",
}]
声明需要用到的变量
var centerBoxHeight;//中间大div的高度
var centerBoxWidth;//中间大div的宽度
var randomTop;//距离顶部随机的距离
var randomLeft;距离左边随机的距离
var isFlag = true;
var isMove = false;//默认不能移动底部按钮
var moveX;
var left;
var isSuccess;
var mouseX;
$(".moveBox").css({//滑块
// "top": randomTop + "px",
"left": randomLeft + "px",
})
获取底部滑动的按钮
let slideProgress = document.querySelector('.slideProgress');
开始的事件：
移动端用：touchstart PC端用：onmousedown
slideProgress.addEventListener("touchstart",(e)=>{
if (!isFlag) {
return;
}
isMove = true;
mouseX =e.touches[0].pageX - $(".centerBox").offset().left;
})
移动事件：
移动端用：touchmove PC端用：onmousemove
slideProgress.addEventListener("touchmove",(e)=>{
if (!isFlag) {
return;
}
if (isMove) {
left = e.touches[0].pageX - $(".centerBox").offset().left - mouseX;
if (left >= $(".centerBox").width() - $(".slideProgress").width()) {
left = $(".centerBox").width() - $(".slideProgress").width();
}
if (left <= 0) {
left = 0;
}
$(".moveBox").css({
"left": left + "px"
})
$(".slideProgress").css({
"left": left + "px"
})
$(".colorBox").css({
"width": left +20+ "px",
"backgroundColor": "#539BF4",
"border-radius":"28px 0 0 28px"
})
}
})
结束事件：
移动端用：touchend，PC端用：onmouseup
slideProgress.addEventListener("touchend",(e)=>{
leftEnd = e.changedTouches[0].pageX; - $(".centerBox").offset().left - mouseX;
if (leftEnd >= $(".centerBox").width() - $(".slideProgress").width()) {
leftEnd = $(".centerBox").width() - $(".slideProgress").width();
}
if (leftEnd <= 0) {
leftEnd = 0;
}
let thisLeft = left,
// if (!isFlag) {
// return;
// }
isMove = false;
isFlag = false;
$(".moveBox").css({
"left": left + "px"
})
$(".slideProgress").css({
"left": left + "px"
})
$(".colorBox").css({
"width": left +20 + "px",
})
if (thisLeft == 160) {
isSuccess == 0
} else if (thisLeft > 160) {
isSuccess = thisLeft - 160;
} else if (thisLeft < 160) {
isSuccess = 160 - thisLeft;
}
if (isSuccess <= 10) {
$(".colorBox").css({
"width": "100%",
"color": "#fff",
"backgroundColor": "#539BF4",
"border-radius":"28px 0 0 28px"
})
$(".slideProgress").css({
"display": "none",
})
$(".tipMessage").css({
"display": "inline-block",
"backgroundColor": "#00CB65"
});
$(".tipMessage").text(
'验证成功，验证码将以短信形式发送给您'
);
$(".moveTip").text(
'完成拼图'
);
$(".moveTip").css(
"color", "#fff"
);
_toast('短信发送成功')//拼图成功后的提示
var timeout=setTimeout(function () {
$(".slideBox").hide();
layer.closeAll();
}, 500);
setTime();
} else {
$(".tipMessage").css({
"display": "inline-block"
});
$(".tipMessage").text(
'请拖动滑块将悬浮图像正确拼合'
);
$(".tipMessage").css({
"backgroundColor": "#FF404E"
})
$(".colorBox").css({
"backgroundColor": "#FF6B76",
"border-radius":"28px 0 0 28px"
})
var timeout=setTimeout(function () {
$(".colorBox").css({
"width": "0px"
})
$(".moveBox").css({
"left": "10px"
})
$(".slideProgress").css({
"left":"10px",
})
$(".tipMessage").hide()
}, 1000);
isMove = false;
isFlag = true;
};
})
点击刷新换背景图，换滑块，换滑块位置（随机的）
$(".refresh").click(function() {
isMove = false;
isFlag = true;
$(".slideProgress").css({
"display": "inline-block",
})
$(".colorBox").css({
"width": "0px"
})
$(".moveTip").css(
"color","#969799",
);
$(".moveTip").text(
'请拖动滑块将悬浮图像正确拼合'
);
randomArea();
})
点击关闭（底部滑块回到开始位置）
$(".close").click(function() {
isMove = false;
isFlag = true;
$(".colorBox").css({
"width": "0px"
})
$(".tipMessage").css({
"display": "none"
});
randomArea()；
})
封装函数，使滑块可以随机变换位置
function randomArea() {
var i = Math.floor(Math.random() * imgArr.length);
$(".bgBox img").attr("src", imgArr[i].bgimg);
$(".moveBox img").attr("src", imgArr[i].hdimg);
// centerBoxHeight = $(".centerBox").height() - 60;
// centerBoxWidth = $(".centerBox").width();
// randomTop = parseInt(Math.random() * (centerBoxHeight - 72 + 1) + 72);
// randomLeft = parseInt(Math.random() * (centerBoxWidth - 72 + 1) + 72); //centerBoxWidth最大left,72是最小left
// $(".moveBox").css({
// // "top": randomTop + "px",
// // "top": 42 + "px",
// "left": randomLeft + "px"
// });
// $(".slideProgress").css({
// "left": "0px"
// })
}
// 滑动时禁止整个页面左右拖动(浏览器)
$("整个页面的最外层div").ready(function(){
function stopScrolling(event) {
event.preventDefault();
}
document.addEventListener('touchmove',stopScrolling,false);
})