jQuery实现html可联动的百分比进度条

.percentage-container {
 margin: 20px auto;
 width: 600px;
 text-align: center;
}
 
.percentage-container .a-percentage {
 margin: 0;
 width: 400px;
 cursor:pointer;
}
 
.a-percentage {
 float:left;
 padding: 2px;
 background: rgba(0, 0, 0, 0.25);
 border-radius: 6px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
 
.a-percentage-bar {
 position: relative;
 height: 16px;
 border-radius: 4px;
 -webkit-transition: 0.2s linear;
 -moz-transition: 0.2s linear;
 -o-transition: 0.2s linear;
 transition: 0.2s linear;
 -webkit-transition-property: width, background-color;
 -moz-transition-property: width, background-color;
 -o-transition-property: width, background-color;
 transition-property: width, background-color;
 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 background: url("img/stripes.png") 0 0 repeat;
 background-color: #FF5400;
}
 
.percentage-container .b-percentage {
 margin: 0;
 width: 400px;
 cursor:pointer;
}
 
.b-percentage {
 float:left;
 padding: 2px;
 background: rgba(0, 0, 0, 0.25);
 border-radius: 6px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
 
.b-percentage-bar {
 position: relative;
 height: 16px;
 border-radius: 4px;
 -webkit-transition: 0.2s linear;
 -moz-transition: 0.2s linear;
 -o-transition: 0.2s linear;
 transition: 0.2s linear;
 -webkit-transition-property: width, background-color;
 -moz-transition-property: width, background-color;
 -o-transition-property: width, background-color;
 transition-property: width, background-color;
 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 background: url("img/stripes.png") 0 0 repeat;
 background-color: #FF5400;
}

$(document).ready(function (){
 var w = $('.a-percentage').width();
 var pos_x = $('.a-percentage').offset().left;
 var inti_x = $('.a-percentage').attr('data-x')*4;
 setProgressAndColor(inti_x, w);
 
 $('.a-percentage').click(function(e) { 
 var x = e.originalEvent.x || e.originalEvent.layerX || 0; 
 x = x - pos_x;
 if(x > 0 && x