zoukankan      html  css  js  c++  java
  • 原生js实现淘宝验证滑动条 onmousedown onmousemove onmouseup

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .box {
                    width: 300px;
                    height: 40px;
                    line-height: 40px;
                    background-color: #e8e8e8;
                    position: relative;
                    margin: 0 auto;
                    text-align: center;
                }
                
                .bg {
                    width: 0px;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: #75CDF9;
                }
                
                .btn {
                    width: 40px;
                    height: 38px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    border: 1px solid #ccc;
                    cursor: move;
                    font-family: "宋体";
                    text-align: center;
                    background-color: #fff;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    color: #666;
                    z-index: 10;
                }
                
                .bg span {
                    display: none;
                }
            </style>
        </head>
    
        <body>
            <div class="box">
                请拖动滑块解锁
                <div class="bg" id="bg">
                    <span>验证成功</span>
                </div>
                <div class="btn" id="btn">&gt;&gt;</div>
            </div>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                window.onload = function() {
                    //获取元素
                    var oBox = document.querySelector(".box");
                    var oBg = document.getElementById("bg");
                    var oBtn = document.getElementById("btn");
                    var oSpan = document.querySelector(".bg span");
                    console.log(oBtn.innerHTML);
    
                    var bgWidth = oBox.offsetWidth - oBtn.offsetWidth;
                    console.log(bgWidth);
                    //绑定事件
                    oBtn.onmousedown = function(e) {
    
                        var left = this.offsetLeft; //0
                        //起点--鼠标相对于浏览器的位置
                        var originX = e.clientX;
    
                        oBtn.onmousemove = function(e) {
                            var Left = parseInt(oBtn.style.left);
                            console.log(Left);
    
                            if(oBtn.style.left == bgWidth + 'px') {
                                oBg.style.background = "forestgreen";
                                oSpan.style.display = "block";
                                oBtn.innerHTML = '<div class="btn" id="btn">√</div>';
                                oBtn.style.border = "0"
                                return false;
                                oBtn.style.left = bgWidth + "px";
                            }
                            if(Left < 0 || Left >= bgWidth) {
                                return false;
                            }
                            
                            //终点
                            var endX = e.clientX;
                            //移动的距离
                            var distanceX = endX - originX;
    
                            oBtn.style.left = (left + distanceX) + "px";
    
                            //改变bg
                            oBg.style.width = (left + distanceX) + "px";
    
                        }
                    }
                    //移除move事件
                    document.onmouseup = function() {
                        oBtn.onmousemove = null;
                        console.log(oBtn.style.left);
                        if(oBtn.style.left != bgWidth + 'px') {
                            oBtn.style.left = 0 + "px";
                            oBg.style.width = 0 + "px";
    
                        }
    
                    }
    
                }
            </script>
        </body>
    
    </html>
  • 相关阅读:
    【tyvj1952】easy
    【noip2005】篝火晚会
    BZOJ4818: [Sdoi2017]序列计数
    BZOJ2436: [Noi2011]Noi嘉年华
    BZOJ4826: [Hnoi2017]影魔
    BZOJ4540: [Hnoi2016]序列
    BZOJ4827: [Hnoi2017]礼物
    BZOJ3527: [Zjoi2014]力
    BZOJ4407: 于神之怒加强版
    BZOJ1854: [Scoi2010]游戏
  • 原文地址:https://www.cnblogs.com/150536FBB/p/9787549.html
Copyright © 2011-2022 走看看