注册登陆拖拽验证（1）

今天由于工作不是很忙，就抽了一些时间来写一个登陆滑块验证的代码，由于小子初学，在网上借鉴了一些别人的代码，捣鼓了很久终于把效果实现了。ps：小子初来咋到，技术确实有限，代码中也许有许多不严谨的地方，请各位大神多多指出。

 

效果截图：

  

 

不多说，先上代码。

 

HTML代码:

1 <div class="wrap">
2 　　<div class="box">
3 　　　　<div class="btn" id="dragEle"></div>
4 　　　　<div class="tips">>>拖动滑块验证<<</div>
5 　　</div>
6　　<input type="button" value="提交验证" id="submit" />
7 </div>

 

CSS代码：

 1 body {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 input{
 7     appearance:none;
 8     -moz-appearance:none;
 9     -webkit-appearance:none;
10     background: none;
11     border:none;
12 }
13 
14 .wrap{
15     margin: 200px 0 0 200px;
16 }
17 
18 .box {
19     position: relative;
20     width: 200px;
21     height: 30px;
22     border-radius: 20px;
23     background: #686B69;
24     line-height: 30px;
25     overflow: hidden;
26     margin-bottom: 40px;
27     color: #fff;
28     font-size: 12px;
29 }
30 
31 .btn {
32     position: absolute;
33     top: 0;
34     left: 0;
35     height: 30px;
36     width: 30px;
37     background: #0c7;
38     border-radius: 20px;
39     text-align: center;
40 }
41 
42 .tips {
43     text-align: center;
44 }
45 
46 #submit{
47     line-height: 28px;
48     border-radius: 3px;
49     background: #0c7;
50     width: 200px;
51     text-align: center;
52     color: #fff;
53 }

 

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>

 

posted @ 2015-11-18 16:28  j2ue  阅读(5552)  评论(3)  编辑  收藏  举报