JavaScript+html to implement front-end page sliding verification (2)

This article example shares the specific code of the cool front-end page sliding verification for your reference. The specific content is as follows

Share cool front-end page sliding verification

I have posted one before, and here is another one, but the special effects are different

Or directly on the code:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        /* Slide control container, gray background*/
        #dragContainer {
            position: relative;
            display: inline-block;
            background: #e8e8e8;
            width: 300px;
            height: 33px;
            border: 2px solid #e8e8e8;
        }
        /* Left part of the slider, green background*/
        #dragBg {
            position: absolute;
            background-color: #7ac23c;
            width: 0px;
            height: 100%;
        }
        /* Slide verification container text*/
        #dragText {
            position: absolute;
            width: 100%;
            height: 100%;
            /* Center the text horizontally */
            text-align: center;
            /* The text is vertically centered. You cannot use percentages here because percentages are relative to the original line-height, not the div height*/
            line-height: 33px;
            /* Text cannot be selected */
            user-select: none;
            -webkit-user-select: none;
        }
        /* slider*/
        #dragHandler {
            position: absolute;
            width: 40px;
            height: 100%;
            cursor: move;
        }
        /* Initial background of the slider */
        .dragHandlerBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
        }
        /* The slider background will have a √ when verification is successful*/
        .dragHandlerOkBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
        }
    </style>
</head>
<body>
        <div id="dragContainer"><!-- Initial background of container -->
            <div id="dragBg"></div><!-- Green background-->
            <div id="dragText"></div><!-- Sliding container text-->
            <div id="dragHandler" class="dragHandlerBg"></div>
        </div> <!-- Slider initial background -->
</body>

<script>
    //Load (the event will be triggered after the page is loaded)
    window.onload = function() {
        //Get the sliding control container, gray background var dragContainer = document.getElementById("dragContainer");
        //Get the left part of the slider, green background var dragBg = document.getElementById("dragBg");
        //Get the sliding verification container text var dragText = document.getElementById("dragText");
        //Get the slider var dragHandler = document.getElementById("dragHandler");

        //The maximum offset of the slider = the length of the sliding verification container text - the length of the slider var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
        //Whether the verification is successful var isVertifySucc = false;

        initDrag();

        function initDrag() {
            //Write "Drag the slider to verify" in the sliding verification container text
            dragText.textContent = "Drag the slider to verify";
            //Add mouse down listener to the slider dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
        }

        //Select the slider function onDragHandlerMouseDown() {
            //Mouse movement monitoring document.addEventListener("mousemove", onDragHandlerMouseMove);
            //Mouse release listener document.addEventListener("mouseup", onDragHandlerMouseUp);
        }

        //Slider movement function onDragHandlerMouseMove() {
            /*
            The html element does not have a width attribute, only clientWidth
            offsetX is relative to the current element, clientX and pageX are relative to its parent element*/
            //Slider movement var left = event.clientX - dragHandler.clientWidth / 2;
            //
            if(left < 0) {
                left = 0;
                //If the slider movement > the maximum offset of the slider, call the verification success function} else if(left > maxHandlerOffset) {
                left = maxHandlerOffset;
                verifySucc();
            }
            //Slider movement dragHandler.style.left = left + "px";
            //The length of the green background dragBg.style.width = dragHandler.style.left;
        }

        //Release the slider function function onDragHandlerMouseUp() {
            //Remove mouse movement listening document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //Remove mouse release listener document.removeEventListener("mouseup", onDragHandlerMouseUp);
            //Initialize the slider movement dragHandler.style.left = 0;
            //Initialize green background dragBg.style.width = 0;
        }

        //Verification successful function verifySucc() {
            //Successful marking, cannot be rebound isVertifySucc = false;
            //Change the text of the container text to white "Verification passed" font dragText.textContent = "Verification passed";
            dragText.style.color = "white";
            //Verify the slider background dragHandler.setAttribute("class", "dragHandlerOkBg");
            //Remove the mouse down listener dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
            //Remove mouse movement listening document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //Remove mouse release listener document.removeEventListener("mouseup", onDragHandlerMouseUp);
            // After the match is successful, write the page you want to jump to //window.location.href="success page.html" rel="external nofollow";
        };
    }
</script>
</html>

The effect is as follows

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

The problem and solution of using Vue-scroller page input box not triggering sliding
Vue implements left and right linkage sliding pages based on better-scroll
Vue implements page switching sliding effect
How to use fingers to slide between Vue routing pages
Implementing left and right sliding effect of page switching based on Vue
JavaScript+html to implement front-end page sliding verification
JavaScript gets the scroll bar position and slides the page to the anchor point
js to achieve sliding to the bottom of the page to automatically load more functions
js/jquery control page dynamic loading data sliding scroll bar automatic loading event method
Vue/js realizes the effect of automatic page sliding up

<<: MySQL data insertion efficiency comparison

>>: How to reset your Linux password if lost