自己手写的滑块验证码，前端签证码。因为极验验证好像要收费，自己纯手工打造，大家可以自己在这个基础上改进

需要的外部插件：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)
    }
   
    
}

效果图：