拖拽——拖动进度条显示进度

拖动进度条代码

 

<!doctype html>
<html>
<head>
   <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            //设置最大值
            ScrollBar.maxValue = 30;
            //初始化
            ScrollBar.Initialize();
        });
        var ScrollBar = {
            value: 10,
            maxValue: 30,
            step: 1,
            currentX: 0,
            Initialize: function () {
                if (this.value > this.maxValue) {
                    alert("给定当前值大于了最大值");
                    return;
                }
                this.GetValue();
                $("#scroll_Track").css("width", this.currentX + 2 + "px");
                $("#scroll_Thumb").css("margin-left", this.currentX + "px");
                this.Value();
                $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
            },
            Value: function () {
                var valite = false;
                var currentValue;
               
                $("#scrollBar").mousedown(function () {
                    valite = true;
                    $(document).mousemove(function (e) {
                        var event = e || window.event;
                        
                        if (valite == false) return;
                        
                        currentValue = event.clientX - $('#scrollBar').offset().left ;
                        
                        $("#scroll_Thumb").css("margin-left", currentValue + "px");
                        $("#scroll_Track").css("width", currentValue + 2 + "px");
                        //超出限制
                        if ((currentValue + 25) >= $("#scrollBar").width()) {
                            $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px");
                            $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
                            ScrollBar.value = ScrollBar.maxValue;
                        } else if (currentValue <= 0) {
                            $("#scroll_Thumb").css("margin-left", "0px");
                            $("#scroll_Track").css("width", "0px");
                        } else {
                            ScrollBar.value = parseInt(currentValue*30 / $("#scrollBar").width());
                        }
                        $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
                    });
                });
                $(document).mouseup(function () {
                    
                    $(this).unbind('mousedown');
                    $(this).unbind('mousemove');
                });
            },
            GetValue: function () {
                this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
            }
        }
    </script>
<style type="text/css">
body{
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
#Main {
    width: 70%;
    height: 300px;
    margin: 0 auto;
    margin-top: 10px;
}
#scrollBar {
    width: 80%;
    height: 10px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}
#scroll_Track {
    width: 0px;
    height: 10px;
    background-color: #ff4400;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
#scroll_Thumb {
    height: 25px;
    width: 25px;
    background-color: #efefef;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 5px #ccc;
    -moz-box-shadow: 0px 0px 5px #ccc;
    box-shadow: 0px 0px 5px #ccc;
    position: absolute;
    margin-top: -18px;
    cursor: pointer;
}
#scroll_Thumb:hover {
    background-color: #ff4400;
    border: 1px solid #fff;
}
.progressTime {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            position: absolute;
            _position: fixed;
            left: 25%;
            top:25%;
            Z-INDEX: 2;
            border: 1px solid gray;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            color: white;
            background: #000;
            width: 660px;
            height:200px;
            padding-top: 0px;
            padding-bottom: 0px;
        }
</style>
</head>
<body>

    <div id="Demo" class="progressTime" >
        <div id="Main">
          <div id="scrollBar">
            <div id="scroll_Track"></div>
            <div id="scroll_Thumb"></div>
          </div>
          <p id="scrollBarTxt" style="text-align:center;"></p>
    </div>

</body>

</html>
View Code

 

效果图

结论

这段代码只是实现了效果 ，可维护性不是那么高。 但是通过这个无意中解决了一个bug：鼠标抬起解绑mousemove、mousedown事件，然后鼠标抬起还是会拖动。不知道怎么解决，我给body加了一个user-select：none;之后这个bug没了！

posted @ 2017-03-02 14:16  小鱼海棠  阅读(321)  评论(0)  编辑  收藏  举报