js implémente la vérification du curseur coulissant (avec code)-js tutoriel-php.cn

js implémente la vérification du curseur coulissant (avec code)

不言

Libérer： 2018-08-15 11:30:31

original

5492 Les gens l'ont consulté

Ce que cet article vous apporte concerne l'implémentation js de la vérification du curseur coulissant (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="pintu.css" type="text/css">
</head>
<body>
    <div>
        <div>
            <!--<img src="image/1.png">-->
            <div></div>
            <div></div>
        </div>
        <div>
            <span></span>
            <span>拖动滑块</span>
        </div>
    </div>
<script src="jquery.js"></script>
<script src="pintu.js"></script>
</body>
</html>

Copier après la connexion

css:
.box {
    width: 300px;
    background-color: palevioletred;
    padding: 20px;
    background-color: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
}

.imgBox img {
    width: 100%;
}

.imgBox {
    position: relative;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
}

.verify {
    position: absolute;
    left: 10px;
    width: 38px;
    height: 38px;
    top: 50%;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 300px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4);
    z-index: 1;
}

.verified {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 50%;
    right: 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;
}

.handle {
    display: flex;
    align-items: center;
    position: relative;
    height: 30px;
    border-radius: 20px;
    margin: 20px 0;
    padding: 4px 0 4px 70px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2) inset;
    background: #f5f5f5;
    user-select: none;
}

.swiper {
    position: absolute;
    top: -7px;
    left: 0px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: pink;
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
    z-index: 2;
}



.text {
    color: #aaa;
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 8px;
    padding-left: 20px;
    margin-left: -30px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1f1f1),  color-stop(1, #f5f5f5));
    transition: opacity 0.5s ease-in-out;
    -webkit-animation: slidetounlock 2s infinite;
}
@keyframes slidetounlock {
    0% {
        background-position: -100px 0
    }
    50%{
        background-position: 0px 0
    }
    100% {
        background-position: 100px 0
    }
}

Copier après la connexion

js:
var box = $(&#39;.box&#39;),
    imgBox = $(&#39;.imgBox&#39;),
    handle = $(&#39;.handle&#39;)
swiper = $(&#39;.swiper&#39;),
    text = $(&#39;.text&#39;),
    verify = $(&#39;.verify&#39;),
    verified = $(&#39;.verified&#39;)

$(function () {
    // 随机添加背景图
    refreshImg()

    window.onload = start()
})


function start() {
    var verImg = $(&#39;.verImg&#39;)[0];

    if (verImg) {
        verImg.onload = function () {
            //获取图片的高度
            var imgH = this.clientHeight;

            //随机生成坐标（图片框固定宽度为300px 高度不定）
            var verX = 150 * (1 + Math.random()) - 38,
                verY = imgH / 4 + Math.random() * imgH / 2;
            //用户滑动函数
            fnDown(verX, verY);

        }
    }
}

function fnDown(verX, verY) {
    swiper.mousedown(function () {
        e=event || window.event
        e.stopPropagation()//阻止冒泡行为（让子元素与父元素的响应分离）

        //30为模块的宽度
        verify.css({
            display: &#39;block&#39;,
            top: `${verY}px`,
            &#39;background-position&#39;: `-${verX}px -${verY}px`
        })
        verified.css({display: &#39;block&#39;, left: `${verX}px`, top: `${verY}px`})

        // 获取鼠标到按钮的距离
        var disX = e.clientX - $(this).offset().left,
            disY = e.clientY - $(this).offset().top;
        text.css(&#39;opacity&#39;, &#39;0&#39;);

        //防止重复绑定多次触发
        box.unbind(&#39;mousemove&#39;);
        box.unbind(&#39;mouseup&#39;);

        //移动
        box.bind(&#39;mousemove&#39;, function () {
            e = event || window.event;
            fnMove(e, disX, disY);
        })

        //释放
        box.bind(&#39;mouseup&#39;, function () {
            var stopL = verify.offset().left - 28;

            //误差在2px以内则算验证成功
            if (Math.abs(stopL - verX) > 2) {
                alert(&#39;验证失败&#39;);
            } else {
                alert(&#39;验证成功&#39;);
            }
            //解除绑定，并将滑块模块归位
            box.unbind(&#39;mousemove&#39;);
            swiper.css(&#39;left&#39;, &#39;0px&#39;);
            verify.css(&#39;left&#39;, &#39;10px&#39;);
            text.css(&#39;opacity&#39;, &#39;1&#39;)
            box.unbind(&#39;mouseup&#39;);
        })
    })
}

function fnMove(e, posX, posY) {
    // 这里的e是以鼠标为参考
    var l = e.clientX - posX - $(handle).offset().left,
        winW = $(handle).width() + 29
    // 限制拖动范围只能在handle中
    if (l < 0) {
        l = 0
    } else if (l > winW) {
        l = winW
    }

    swiper.css(&#39;left&#39;, `${l}px`)
    verify.css(&#39;left&#39;, `${l + 10}px`)
}

function refreshImg() {

    verify.hide()
    verified.hide()

    var verImg = $(&#39;.verImg&#39;)
    if (verImg.length) {
        verImg.attr(&#39;src&#39;, `image/1.png`)
    } else {
        imgBox.prepend(`<img class=&#39;verImg&#39; src="image/1.png" />`)
    }
    verify.css(&#39;background-image&#39;, `url(&#39;image/1.png&#39;)`)
}

Copier après la connexion

Recommandations associées :

Comment implémenter le code de vérification du glissement d'image

JS et Canvas implémentent la fonction de vérification du code de puzzle coulissant

Implémentez la fonction de vérification du curseur de glissement basée sur les composants JS

Mise en œuvre de la vérification coulissante de connexion js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!