注冊登陸拖拽驗證（1）

今天由於工作不是很忙，就抽了一些時間來寫一個登陸滑塊驗證的代碼，由於小子初學，在網上借鑒了一些別人的代碼，搗鼓了很久終於把效果實現了。ps：小子初來咋到，技術確實有限，代碼中也許有許多不嚴謹的地方，請各位大神多多指出。

 

效果截圖：

  

 

不多說，先上代碼。

 

HTML代碼:

<div class="wrap">
　　<div class="box">
3 　　　　<div class="btn" id="dragEle"></div>
　　　　<div class="tips">>>拖動滑塊驗證<<</div>
　　</div>
6　　<input type="button" value="提交驗證" id="submit" />
</div>

 

CSS代碼：

body {
    margin: 0;
    padding: 0;
}

input{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: none;
    border:none;
}

.wrap{
    margin: 200px 0 0 200px;
}

.box {
    position: relative;
    width: 200px;
    height: 30px;
    border-radius: 20px;
    background: #686B69;
    line-height: 30px;
    overflow: hidden;
    margin-bottom: 40px;
    color: #fff;
    font-size: 12px;
}

.btn {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background: #0c7;
    border-radius: 20px;
    text-align: center;
}

.tips {
    text-align: center;
}

#submit{
    line-height: 28px;
    border-radius: 3px;
    background: #0c7;
    width: 200px;
    text-align: center;
    color: #fff;
}

 

JS代碼：

<script type="text/javascript">
    function DragValidate (dargEle,msgEle){
        var dragging = false;//滑塊拖動標識
        var iX;
        dargEle.mousedown(function(e) {
            msgEle.text("");
            dragging = true;
            iX = e.clientX; //獲取初始坐標
        });
        $(document).mousemove(function(e) {
            if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                if(oX < 30){
                    return false;
                };
                if(oX >= 210){//容器寬度+10
                    oX = 200;
                    return false;
                };
                dargEle.width(oX + "px");
                //console.log(oX);
                return false;
            };
        });
        $(document).mouseup(function(e) {
            var width = dargEle.width();
            if(width < 200){
                //console.log(width);
                dargEle.width("30px");
                msgEle.text(">>拖動滑塊驗證<<");
            }else{
                dargEle.attr("validate","true").text("驗證成功！").unbind("mousedown");
            };
            dragging = false;
        });
    };

    DragValidate($("#dragEle"),$(".tips"));
    $("#submit").click(function(){
        if(!$("#dragEle").attr("validate")){
            alert("請先拖動滑塊驗證！");
        }else{
            alert("驗證成功！");
        }；
    });
</script>