原创

前端滑动验证js

几步几步寻发布于:2021-04-28

滑动验证，这里吧js代码和HTML代码分享出来。

<style>
        *{
            margin: 0 auto;
        }
        .verify{
            width: 280px;
            height: 40px;
            margin-top: 30px;
        }
        .verify span{
            width: 38px;
            height: 40px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 40px;
            letter-spacing: 0px;
            color: #302f41;
            margin-right: 23px;
        }
        #verify_box{
            width: 240px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color:#fff;
            position: relative;
            background-color: rgba(212, 212, 212, 1);
            top:-40px;
            right:-49px;
        }
        #verify_xbox{
            width: 54px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color:#fff;
            position: absolute;
            background: #7BBB55;
        }
        #btn{
            cursor: pointer;
            width: 54px;
            height: 40px;
            background-color: rgba(255, 255, 255, 1);
            border: solid 1px rgba(212, 212, 212, 1);
            float: right;
        }
        .continue{
            width: 120px;
            height: 40px;
            background-color: rgba(212, 212, 212, 1);
            margin: 0 70px;
            border: none;
            color: #302f41;
            font-size: 16px;
        }
        .continue:hover{
            background-color: rgba(235, 54, 38, 1);
            color: #ffffff;
        }
        img {
            max-width: 100%;
        }
    </style>
    
    <div class="verify">
        <span>验证:</span>
        <div id="verify_box">
            <div id="verify_xbox">
                <div id="btn">
                    <img src="img/lllllll.png"/>
                </div>
            </div>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;按住滑块，拖动到最右边
        </div>
       
    </div>
    <script type="text/javascript" src="js/slide.js"></script>

## js代码slide.js

/**
     * Created by Alone on 2017/11/6.
     */
    var box=document.getElementById('verify_box');
    var xbox=document.getElementById('verify_xbox');
    var element=document.getElementById('btn');
    var b=box.offsetWidth;
    var o=element.offsetWidth;
    element.ondragstart = function() {
        return false;
    };
    element.onselectstart = function() {
        return false;
    };
    element.onmousedown = function(e) {
        var disX = e.clientX - element.offsetLeft;
        document.onmousemove = function (e) {
            var l = e.clientX - disX +o;
            if(l<o){
                l=o
            }
            if(l>b){
                l=b
            }
            xbox.style.width = l + 'px';
        };
        document.onmouseup = function (e){
            var l = e.clientX - disX +o;
            if(l<b){
                l=o
            }else{
                l=b;
                xbox.innerHTML='éªŒè¯é€šè¿‡<div id="btn"><img style="margin-top:8px" src="img/kkkk.png"/></div>';
            }
            xbox.style.width = l + 'px';
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }

注:原创不易,转载请注明出处( https://micuu.com/new/1542.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

最后修改与 2022-02-18

上一篇： css3的媒体查询示例

下一篇： mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次

留言反馈

请先登录

问题反馈渠道，如有软件无法下载或者其他问题可反馈。【由于某种原因，目前留言不展示】
用户需要登录后才能留言反馈

珍藏视频

10分钟高效燃脂

30天高效瘦脸操

5分钟缓解颈椎操

友人

科技小锅盖