使用jq制作一个可拖拽的进度条

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>

主要由背景条，背景bar和按钮组成

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;
        }

主要对html部分进行“装修”。

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) + '%');
                }
            });
        });

主要由鼠标按下，鼠标松开，鼠标移动几个事件组成。
重要的方法：
offset（）：获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标
e.page：相对于document的坐标