原生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>

 

posted @ 2018-10-14 19:34  氧化成风  阅读(619)  评论(0)    收藏  举报