可滑动的进度条，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('left:'+ this.leftPercent.toFixed(2) +'right:'+ (1-this.leftPercent).toFixed(2) +'');
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>