Swipe images to verify login

You can drag an image directly or you can click and drag an image

The effect

template

<el-form-item v-if=! "" yanz">
  <div id="imgVer" style="display:inline-block; position:relative;"></div>
</el-form-item>
Copy the code

In Mounted, install jquery and install plugins

const imgYan =() = > {
    var _self = context ;
    var config = {
        el:'$("#imgVer")'.pl:_self,
        width:'360'.height:'144'.img: ['Add your own picture here'].success:function () {
            setTimeout(function(){
                state.yanz = true ;
            },1100)},error:function () {
            state.yanz = false; }}// This method is below
    imgVer(config)
}
Copy the code

import $ from 'jquery';
export const imgVer = (Config) = > {
// Cache the last pageX
let localPageX = ' '
// Fix compatibility
function getScroll() {
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        return {
            scrollLeft: scrollLeft,
            scrollTop: scrollTop
        }
}
function getPageX(e) {
        let pageX = ' '
        if(inMobile){
            if(e.targetTouches[0]){
                pageX = e.targetTouches[0].pageX
                localPageX = pageX
            }else {
                // Take the cache value when touchend
                pageX = localPageX
            }
        } else {
            pageX = e.pageX || e.clientX + getScroll().scrollLeft;
        }
        return pageX
}
const sUserAgent = navigator.userAgent.toLowerCase();
const inMobile = sUserAgent.includes('mobile')
var el = eval(Config.el);
var w = Config.width;
var h = Config.height;
var imgLibrary = Config.img;
var PL_Size = 48;
var padding = 20;
var MinN_X = padding + PL_Size;
var MaxN_X = w - padding - PL_Size - PL_Size / 6;
var MaxN_Y = padding;
var MinN_Y = h - padding - PL_Size - PL_Size / 6;
function RandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
if (Math.round(Rand * Range) == 0) {
    return Min + 1;
} else if (Math.round(Rand * Max) == Max) {
    return Max - 1;
} else {
    var num = Min + Math.round(Rand * Range) - 1;
    returnnum; }}var imgRandom = RandomNum(1, imgLibrary.length);
var imgSrc = imgLibrary[imgRandom-1];
var X = RandomNum(MinN_X, MaxN_X);
var Y = RandomNum(MinN_Y, MaxN_Y);
var left_Num = -X + 10;

var html = '
      

       '
      ;
html += ' + w + 'px;" > ';
html += ' + w + 'px; height:' + h + 'px;" > ';
html += '<img id="scream" src="' + imgSrc + '" style="width:' + w + 'px; height:' + h + 'px;" > ';
html += '<canvas id="puzzleBox" width="' + w + '" height="' + h + '" style="position:absolute; left:0; top:0; z-index:22222;" >';
html += '</div>';
html += ' + w + 'px; height:' + h + 'px; top:0; left:' + left_Num + 'px; z-index:111111;" > ';
html += '<canvas id="puzzleShadow" width="' + w + '" height="' + h + '" style="position:absolute; left:0; top:0; z-index:22222;" >';
html += '<canvas id="puzzleLost" width="' + w + '" height="' + h + '" style="position:absolute; left:0; top:0; z-index:333333;" >';
html += '</div>';
html += '<p class="ver-tips"></p>';
html += '</div>';
html += '<div class="re-btn"><a></a></div>';
html += '</div>';
// html += '<br>';

html += ' + w + 'px; margin:auto; margin-top:10px;" > ';
html += '
      

        '
      ;
html += '
 Hold the left slider and drag to complete the top puzzle 
';
html += '</div>';
html += '<div class="slider-btn"></div>';
html += '</div>';
el.html(html);
function addImg(){
        var d = PL_Size / 3;
        var c = document.getElementById("puzzleBox");
        var ctx = c.getContext("2d");
        ctx.clearRect(0.0,c.width,c.height);
        ctx.globalCompositeOperation = "xor";
        ctx.shadowBlur = 10;
        ctx.shadowColor = "#fff";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.fillStyle = "Rgba (0,0,0,0.7)";
        ctx.beginPath();
        ctx.lineWidth = "1";
        ctx.strokeStyle = "Rgba (0,0,0,0)";
        ctx.moveTo(X, Y);
        ctx.lineTo(X + d, Y);
        ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
        ctx.lineTo(X + 3 * d, Y);
        ctx.lineTo(X + 3 * d, Y + d);
        ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
        ctx.lineTo(X + 3 * d, Y + 3 * d);
        ctx.lineTo(X, Y + 3 * d);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        var c_l = document.getElementById("puzzleLost");
        var c_s = document.getElementById("puzzleShadow");
        var ctx_l = c_l.getContext("2d");
        var ctx_s = c_s.getContext("2d");
        ctx_l.clearRect(0.0,c_l.width,c_l.height);
        ctx_s.clearRect(0.0,c_s.width,c_s.height);
        var img = new Image();
        img.src = imgSrc;
        img.onload = function() {
            ctx_l.drawImage(img, 0.0, w, h);
        }
        ctx_l.beginPath();
        ctx_l.strokeStyle = "Rgba (0,0,0,0)";
        ctx_l.moveTo(X, Y);
        ctx_l.lineTo(X + d, Y);
        ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
        ctx_l.lineTo(X + 3 * d, Y);
        ctx_l.lineTo(X + 3 * d, Y + d);
        ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
        ctx_l.lineTo(X + 3 * d, Y + 3 * d);
        ctx_l.lineTo(X, Y + 3 * d);
        ctx_l.closePath();
        ctx_l.stroke();
        ctx_l.shadowBlur = 10;
        ctx_l.shadowColor = "black";
        ctx_l.clip();
        ctx_s.beginPath();
        ctx_s.lineWidth = "1";
        ctx_s.strokeStyle = "Rgba (0,0,0,0)";
        ctx_s.moveTo(X, Y);
        ctx_s.lineTo(X + d, Y);
        ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
        ctx_s.lineTo(X + 3 * d, Y);
        ctx_s.lineTo(X + 3 * d, Y + d);
        ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
        ctx_s.lineTo(X + 3 * d, Y + 3 * d);
        ctx_s.lineTo(X, Y + 3 * d);
        ctx_s.closePath();
        ctx_s.stroke();
        ctx_s.shadowBlur = 20;
        ctx_s.shadowColor = "black";
        ctx_s.fill();
}
addImg();
var moveStart = ' ';
var timer ;
function showContainer(){
        timer = setTimeout(function(){$("#showTipTopMess").show().css({"bottom":"40px"."opacity":"1"});
        },300)}// Display images directly instead of moving them in
    // showContainer()
function hideContainer(time){$("#showTipTopMess").css({"bottom":"0"."opacity":"0"});
        clearTimeout(timer)
        setTimeout(function(){$("#showTipTopMess").hide()
        },time)
}
if(inMobile){
        const dom_imgVer = document.getElementById('imgVer')
        dom_imgVer.addEventListener('touchstart'.function() {
            showContainer()
        })
        dom_imgVer.addEventListener('touchend'.function() {
            hideContainer(3000)})}else{$("#imgVer").hover(function(){
            /** If you want to display the image when the mouse moves in, execute the method */ here
            showContainer()
        },function(){
            // Close the image move in and move out
            hideContainer(300)}); }function isShow(){
        setTimeout(function() {$(".slider-btn").css({
                "left": '0'."transition": "Left 0.5 s"
            });
            $("#puzzleLost").css({
                "left": '0'."transition": "Left 0.5 s"
            });
            $("#puzzleShadow").css({
                "left": '0'."transition": "Left 0.5 s"
            });
        }, 1000);
   $(".slider-btn").removeClass("on")}function verifyStart(e, _this){
        e = e || window.event;
        $(_this).addClass("on");
        moveStart = getPageX(e);
}
function verifyEnd(e){
        e = e || window.event;
        // var moveEnd_X = e.pageX - moveStart;
        var moveEnd_X = getPageX(e) - moveStart;
        var ver_Num = X - 10;
        var deviation = 4;
        var Min_left = ver_Num - deviation;
        var Max_left = ver_Num + deviation;
        if (moveStart == ' ') {} else {
            if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
                $(".ver-tips").html('< span>');
                $(".ver-tips").addClass("slider-tips");
                $(".puzzle-lost-box").addClass("hidden");
                $("#puzzleBox").addClass("hidden");
                setTimeout(function() {$(".ver-tips").removeClass("slider-tips");
                }, 2000);
                isShow();
                Config.success();
            } else{$(".ver-tips").html(');
                $(".ver-tips").addClass("slider-tips");
                setTimeout(function() {
                    setTimeout(function(){
                        var p = RandomNum(1, imgLibrary.length);
                        imgSrc = imgLibrary[p-1];
                        $("#scream").attr({"src":imgSrc});
                        addImg();
                    },300)},500);
                setTimeout(function(){$(".ver-tips").removeClass("slider-tips");
                },2000)
                isShow();
                Config.error();
            }
        }
        moveStart = ' ';
        $(".re-btn a").on("click".function() {
            Config.pl.imgVer(Config);
            $("#showTipTopMess").show().css({"bottom":"40px"."opacity":"1"})})}if(inMobile){
        const dom_slider = document.getElementsByClassName('slider-btn') [0],
        dom_puzzleLost = document.getElementById('puzzleLost'),
        dom_puzzleShadow = document.getElementById('puzzleShadow');
        dom_slider.addEventListener('touchstart'.function(e) {
            verifyStart(e, this)
        })
        ontouchmove = function(e) {
            e = e || window.event;
            // var moveX = e.pageX;
            var moveX = getPageX(e);
            var d = moveX - moveStart;
            if (moveStart == ' ') {} else {
                if (d < 0 || d > (w - padding - PL_Size)) {} else {
                    dom_slider.style.left = d + 'px'
                    dom_slider.style.transition ="inherit"
                    dom_puzzleLost.style.left = d + 'px'
                    dom_puzzleLost.style.transition ="inherit"
                    dom_puzzleShadow.style.left = d + 'px'
                    dom_puzzleShadow.style.transition ="inherit"; }}}; ontouchend =function(e) {
            verifyEnd(e)
        }
}else{
        / / PC
        $(".slider-btn").mousedown(function(e) {
            verifyStart(e, this)}); onmousemove =function(e) {
            e = e || window.event;
            // var moveX = e.pageX;
            var moveX = getPageX(e)
            var d = moveX - moveStart;
            if (moveStart == ' ') {} else {
                if (d < 0 || d > (w - padding - PL_Size)) {
                } else{$(".slider-btn").css({
                        "left": d + 'px'."transition": "inherit"
                    });
                    $("#puzzleLost").css({
                        "left": d + 'px'."transition": "inherit"
                    });
                    $("#puzzleShadow").css({
                        "left": d + 'px'."transition": "inherit"}); }}}; onmouseup =function(e) {
            verifyEnd(e)
        }
  }
}
Copy the code