Jquery实现可拖动进度条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery实现可拖动进度条相关的知识,希望对你有一定的参考价值。

html

 
    <div class="progress">
            <div class="progress_bg">
                <div class="progress_bar"></div>
            </div>
            <div class="progress_btn"></div>
            <div class="text">0%</div>
        </div>
 

css

 
     .progress{position: relative; width:300px;margin:100px auto;}
        .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
        .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
        .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
        left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
        .progress_btn:hover{border-color:#F7B824;}
 

js

 
    $(function(){
                var tag = false,ox = 0,left = 0,bgleft = 0;
                $(‘.progress_btn‘).mousedown(function(e) {
                    ox = e.pageX - left;
                    tag = true;
                });
                $(document).mouseup(function() {
                    tag = false;
                });
                $(‘.progress‘).mousemove(function(e) {//鼠标移动
                    if (tag) {
                        left = e.pageX - ox;
                        if (left <= 0) {
                            left = 0;
                        }else if (left > 300) {
                            left = 300;
                        }
                        $(‘.progress_btn‘).css(‘left‘, left);
                        $(‘.progress_bar‘).width(left);
                        $(‘.text‘).html(parseInt((left/300)*100) + ‘%‘);
                    }
                });
                $(‘.progress_bg‘).click(function(e) {//鼠标点击
                    if (!tag) {
                        bgleft = $(‘.progress_bg‘).offset().left;
                        left = e.pageX - bgleft;
                        if (left <= 0) {
                            left = 0;
                        }else if (left > 300) {
                            left = 300;
                        }
                        $(‘.progress_btn‘).css(‘left‘, left);
                        $(‘.progress_bar‘).animate({width:left},300);
                        $(‘.text‘).html(parseInt((left/300)*100) + ‘%‘);
                    }
                });
            });
效果图:
 
技术分享

以上是关于Jquery实现可拖动进度条的主要内容,如果未能解决你的问题,请参考以下文章

jquery 实现拖动文件上传加进度条

制作进度条(UISlider)

Javascript实现Video视频进度条拖动无效

进度条(可拖动,可定义)

jquery UI可拖动:在容器内水平拖动溢出:滚动?

html5 video 标签 怎样禁止拖动或者点击进度条