js implements sliding slider verification (with code)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js implements sliding slider verification (with code)

不言

Aug 15, 2018 am 11:30 AM

css javascript

The content this article brings to you is about js implementation of sliding slider verification (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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>

Copy after login

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
    }
}

Copy after login

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;)`)
}

Copy after login

Related recommendations:

How to implement picture sliding verification code

js and canvas implementation Sliding puzzle verification code function

Implements dragging slider verification function based on JS component

js login sliding verification accomplish

The above is the detailed content of js implements sliding slider verification (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Will R.E.P.O. Have Crossplay?

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7549

CakePHP Tutorial

1382

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles