可滑动的进度条，PC端和移动端都适用

效果请看：http://yanyancoming.gitee.io/progressbar/
微信上打不开，腾讯不允许此域名(码云生成的静态网页)

问题：

最近朋友问我相关滑动进度条的问题，同时给我看了相关的牛叉的代码封装，想从中抽取出来这部分，然而并抽取不出来。一堆文件我也懒得找，也想自己做做封装，也上升一下档次，装逼是要资本的，是吧，以后也好出来聊聊，是的吧，哈哈~~
我知道的封装方式有：往jquery上封装方法、封装函数，封装对象几种方式，小菜鸟先来尝试尝试做对象的封装，代码简单易懂，不拖泥带水。有什么好的封装意见可以私聊哦~~~

1. 封装Progress_对象 — progress.js

可以自定义设置进度条的总长度，以及进度的百分比(默认为0)，移动端和PC端都适用；
想改变进度条的样式，可以直接自己设置覆盖，或者在Progress_.js中直接更改

/*
 * 将滑动的进度条封装成对象
 * 2018-1-23
 * order by yanyanyan
 * */
function Progress_(data) {
    this.gObj = {};
    this.$box_ = data.$box_;
    this.maxWidth_ = data.maxWidth_ || "4rem";
    this.leftPercent = data.percent || 0;
}
Progress_.prototype = {
    constructor: Progress_,
    init: function() {
        this.$box_.html('<div id="text_xa_">left:'+ this.leftPercent.toFixed(2) +'</div><div id="box_"><div id="bg_"><div id="bgcolor_"></div></div><div id="bt_"></div></div><div id="text_xa">right:'+ (1-this.leftPercent).toFixed(2) +'</div>');
        this.initStyle();
        this.touchstart();
        this.touchmove();
        this.touchend();
        this.mousedown();
        this.mousemove();
        this.mouseup();
        this.bgclick();
    },
    initStyle: function() {
        var that = this;
        that.maxWidth_.indexOf('rem')!=-1 ? that.gObj.left = this.maxWidth_.replace('rem','')*that.leftPercent+'rem' : that.gObj.left = this.maxWidth_*that.leftPercent;
        $('#box_').css({'position': 'relative','width': that.maxWidth_,'margin':'0.2rem','border': '1px solid transparent'});
        $('#bg_').css({'height': '0.4rem','margin-top': '0.14666667rem','border': '1px solid #ddd','border-radius': '5px','overflow': 'hidden','position': 'relative'})
        $('#bgcolor_').css({'background': '#f3f3f3','width': that.gObj.left,'height': '0.4rem','border-radius': '5px'})
        $('#bt_').css({'width': '0.4rem','height': '0.66666667rem','background-color': '#f3f3f3','border-radius': '0.4rem','overflow': 'hidden','position': 'absolute','left': that.gObj.left,'margin-left': '-0.2rem','border': '1px solid #d0cbcb','top': '0.02rem','cursor': 'pointer'})
        $('#text_xa_').css({'padding': '0 0.26666667rem','margin': '0 auto','font-size':' 0.32rem','padding-left': '0.13333333rem','padding-top':' 0.02666667rem','line-height': '2em'})
        $('#text_xa').css({'padding': '0 0.26666667rem','margin': '0 auto','font-size': '0.32rem','padding-left': '0.13333333rem','padding-top': '0.02666667rem','line-height': '2em'})
    },
    touchstart: function(){
        this.gObj.maxWidth = $('#box_').width();
        var that = this;
        $('#bt_').get(0).addEventListener('touchstart', function(e) {
            that.gObj.left =$('#bgcolor_').width();
            that.gObj.ox = e.touches[0].clientX - that.gObj.left;
            that.gObj.status = true;
        })
    },
    touchmove: function(){
        var that = this;
        $('#bt_').get(0).addEventListener('touchmove', function(e) {
            if(that.gObj.status) {
                that.gObj.left = e.touches[0].clientX - that.gObj.ox;
                that.gObj.left < 0 ? that.gObj.left = 0 : that.gObj.left;
                that.gObj.left > that.gObj.maxWidth ? that.gObj.left = that.gObj.maxWidth : that.gObj.left;
                $('#bt_').css('left', that.gObj.left);
                $('#bgcolor_').width(that.gObj.left);
                var percent1 = parseFloat(that.gObj.left*100 /( that.gObj.maxWidth)).toFixed(2) + '%';
                $('#text_xa_').html('left:' + percent1);
                $('#text_xa').html('right:' + parseFloat((that.gObj.maxWidth-that.gObj.left)*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
            }
        })
    },
    touchend: function(){
        var that = this;
        $('#bt_').get(0).addEventListener('touchend', function(e) {
            that.gObj.status = false;
        })
    },
    mousedown: function(){
        var that = this;
        $('#bt_').mousedown(function(e) {
            that.gObj.left =$('#bgcolor_').width();
            that.gObj.ox = e.pageX- that.gObj.left;
            that.gObj.status = true;
        })
    },
    mousemove: function(){
        var that = this;
        $(document).mousemove(function(e) {
            if(that.gObj.status) {
                that.gObj.left = e.pageX - that.gObj.ox;
                that.gObj.left < 0 ? that.gObj.left = 0 : that.gObj.left;
                that.gObj.left > that.gObj.maxWidth ? that.gObj.left = that.gObj.maxWidth : that.gObj.left;
                $('#bt_').css('left', that.gObj.left);
                $('#bgcolor_').width(that.gObj.left);
                $('#text_xa_').html('left:' + parseFloat(that.gObj.left*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
                $('#text_xa').html('right:' + parseFloat((that.gObj.maxWidth-that.gObj.left)*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
            }
        })
    },
    mouseup: function(){
        var that = this;
        $(document).mouseup(function(e) {
            that.gObj.status = false;
        })
    },
    bgclick: function(){
        var that = this;
        $('#bg_').click(function(e){
            if(!that.gObj.status) {
                var bgleft = $("#bg_").offset().left;
                that.gObj.left = e.pageX - bgleft;
                that.gObj.left < 0 ? that.gObj.left = 0 : that.gObj.left;
                that.gObj.left > that.gObj.maxWidth ? that.gObj.left = that.gObj.maxWidth : that.gObj.left;
                $("#bt_").css('left', that.gObj.left);
                $("#bgcolor_").stop().animate({ width: that.gObj.left }, 200);
                var percent1 = parseFloat(that.gObj.left*100 /( that.gObj.maxWidth)).toFixed(2) + '%';
                $('#text_xa_').html('left:' + percent1);
                $('#text_xa').html('right:' + parseFloat((that.gObj.maxWidth-that.gObj.left)*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
            }
        })

    }
}

2. new一个Progress_对象，自动生成可滑动进度条

有默认值，也可以自定义设置进度条的总长度，以及进度的百分比

<input type="text" placeholder="可自定义left初始百分比"/>
<button>生成可滑动滚动条</button>
<div class="box2"></div>
<script type="text/javascript">
    $('button').click(function(){
        var percent = $('input').val()
        if(percent.indexOf('%')!=-1){
            percent = percent.replace("%","")/100;
        }else{
            percent = Number(percent)
        }
        var pro= new Progress_({
            $box_: $('.box2'),
            maxWidth_: '8rem',
            percent: percent
        })
        pro.init();
    })
</script>