自己手写的滑块验证码，前端签证码。因为极验验证好像要收费，自己纯手工打造，大家可以自己在这个基础上改进
需要的外部插件：polyfill.min.js（兼容IE）；html2canvas.js(截图插件)；这个示例没有使用jquery，无需引用。代码写的可能不太友好，将就着看吧。
需要用到的图片也已经上传。如果图片打不开，自己随便找几张图片替换。亲测可用。
html：
按住滑块，拖动完成上方拼图
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
image.js：
var canva;
var rectUp;
var rectRight;
var flag = false;
window.onload = function() {
var commonimg =document.getElementsByName('commonimg');
/*for (var j=0;j150){
console.log(1)
rectLeft = rectUp;
rectRight = rectUp+50;
rectUp = Math.round(Math.random()*150);
rectBottom = rectUp+50;
showArea.style.top = (rectBottom-5)+'px';
showArea.style.left = (rectLeft-5)+'px';
pi.style.clip ="rect("+rectUp +"px "+rectRight+"px "+rectBottom+"px "+rectLeft+"px)";
changePosition.style.top =(rectBottom-2)+'px';
html2canvas(document.getElementById('pi'), {
onrendered: function(canvas) {
document.getElementById("changePosition").appendChild(canvas).setAttribute("id","canvas");
canva =document.getElementById("canvas");
console.log(canva);
canva.style.top = -rectUp+'px';
canva.style.left = -rectLeft+'px';
},
});
}else{
console.log(2)
rectRight = rectUp +50;
rectBottom = rectUp +50;
rectLeft = rectUp;
showArea.style.top = (rectRight-5)+'px';
showArea.style.left = (rectUp-5)+'px';
pi.style.clip ="rect("+rectUp+"px "+rectRight+"px "+rectBottom+"px "+rectLeft+"px)";
changePosition.style.top =(rectRight-2)+'px';
html2canvas(document.getElementById('pi'), {
onrendered: function(canvas) {
document.getElementById("changePosition").appendChild(canvas).setAttribute("id","canvas");
canva =document.getElementById("canvas");
console.log(canva);
canva.style.top = -rectUp+'px';
canva.style.left = -rectUp+'px';
},
});
}
console.log(rectUp,rectRight,rectBottom,rectLeft);
var ifBool = false; //判断鼠标是否按下
//事件
var start = function(e) {
e.stopPropagation();
ifBool = true;
console.log("鼠标按下")
}
var move = function(e) {
console.log("鼠标拖动")
if(ifBool) {
if(!e.touches) { //兼容移动端
var x = e.clientX;
} else { //兼容PC端
var x = e.touches[0].pageX;
}
//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
if(minDiv_left >= lineDiv.offsetWidth - 15) {
minDiv_left = lineDiv.offsetWidth - 15;
}
if(minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
minDiv.style.left = minDiv_left-40 + "px";
changePosition.style.left = minDiv_left + "px";
tempPosition = minDiv_left;
console.log(tempPosition);
if(minDiv_left>388){
tempPosition =388;
minDiv.style.left = 388 + "px";
changePosition.style.left = 388 + "px";
}
if(minDiv_left<=0){
tempPosition =0;
minDiv.style.left = 0 + "px";
changePosition.style.left = 0 + "px";
}
/* msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);*/
/* vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);*/
}
}
var end = function(e) {
ifBool = false;
if(tempPosition>150){
if( (rectRight-tempPosition)<=52 && (rectRight-tempPosition)>=42 ){
console.log(tempPosition,'验证成功！','大于150',rectRight);
success();
}else{
console.log(tempPosition,'验证失败！','大于150',rectRight);
wrong();
}
}else{
if(tempPosition< (rectUp+5) && tempPosition > (rectUp-4) ){
console.log(tempPosition,'验证成功！','小于150');
success();
}else{
console.log(tempPosition,'验证失败！','小于150');
wrong();
}
}
}
//鼠标按下方块
minDiv.addEventListener("touchstart", start);
minDiv.addEventListener("mousedown", start);
//拖动
window.addEventListener("touchmove", move);
window.addEventListener("mousemove", move);
//鼠标松开
window.addEventListener("touchend", end);
window.addEventListener("mouseup", end);
//获取元素的绝对位置
function getPosition(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while(current != null) {
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {
"left": left,
"top": top
};
}
function success(){
var right =document.getElementById("right");
var wrong =document.getElementById("right");
var slider =document.getElementById("slider");
showArea.style.opacity =0;
right.style.display ="block";
wrong.style.display ="none";
minDiv.style.background ='url(img/slider_valid.png)';
minDiv.style.backgroundSize ='100% 100%';
right.style.display ="block"
slider.style.display ="none";
}
function wrong(){
var right =document.getElementById("right");
var wrong =document.getElementById("wrong");
wrong.style.display ="block";
right.style.display ="none";
minDiv.style.background ='url(img/slider_invalid.png)';
minDiv.style.backgroundSize ='100% 100%';
setTimeout(function(){
minDiv.style.background ='url(img/slider.png)';
minDiv.style.backgroundSize ='100% 100%';
minDiv.style.left = 0 + "px";
changePosition.style.left = 0 + "px";
wrong.style.display ="none";
},400)
}
}
效果图：
