suchen

Heim >Web-Frontend >js-Tutorial >js implementiert die Sliding-Slider-Überprüfung (mit Code)

js implementiert die Sliding-Slider-Überprüfung (mit Code)

不言
不言Original
2018-08-15 11:30:315522Durchsuche

In diesem Artikel geht es um die Implementierung der Sliding-Slider-Verifizierung (mit Code). Ich hoffe, dass er für Freunde hilfreich ist. 

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>
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
    }
}
js:
var box = $('.box'),
    imgBox = $('.imgBox'),
    handle = $('.handle')
swiper = $('.swiper'),
    text = $('.text'),
    verify = $('.verify'),
    verified = $('.verified')

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

    window.onload = start()
})


function start() {
    var verImg = $('.verImg')[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: 'block',
            top: `${verY}px`,
            'background-position': `-${verX}px -${verY}px`
        })
        verified.css({display: 'block', left: `${verX}px`, top: `${verY}px`})

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

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

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

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

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

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

    swiper.css('left', `${l}px`)
    verify.css('left', `${l + 10}px`)
}

function refreshImg() {

    verify.hide()
    verified.hide()

    var verImg = $('.verImg')
    if (verImg.length) {
        verImg.attr('src', `image/1.png`)
    } else {
        imgBox.prepend(`865c9ee3e409b3abfe1d5ed7c0cf6d5b`)
    }
    verify.css('background-image', `url('image/1.png')`)
}

Verwandte Empfehlungen:

So implementieren Sie den Verifizierungscode für das Schieben von Bildern

JS und Canvas Implementierung Sliding-Puzzle-Verifizierungscode-Funktion

Drag-Slider-Verifizierungsfunktion basierend auf JS-Komponenten implementieren

js-Login-Sliding-Verifizierung Implementieren


Das obige ist der detaillierte Inhalt vonjs implementiert die Sliding-Slider-Überprüfung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JS canvas
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie springe ich in js von einer Seite zu einer neuen Seite?Nächster Artikel：Wie springe ich in js von einer Seite zu einer neuen Seite?

In Verbindung stehende Artikel

Mehr sehen