JQuery实现的HTML可联动的百分比进度条

最近需要一个HTML可以联动的百分比进度条，网上找了一下没有，自己手动实现了一个。

需要解决的问题，AB两个进度条需要按照百分比A+B=100%，A进度条可以拖动，B进度条联动，并且有进度颜色的变化。实现功能如下：

HTML代码：

<div class="percentage-container" >
    <div class="a-percentage" data-x='30'>
      <div class="a-percentage-bar"></div>
    </div>
	<div class="b-percentage" data-x='70'>
      <div class="b-percentage-bar"></div>
    </div>
  </div>

 

CSS代码：

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

 

JS代码：

$(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 < w){
			setProgressAndColor(x, w);
		}
	});
});

function setProgressAndColor(p, width){
	$('.a-percentage-bar').width(p)
	$('.a-percentage-bar').css('background-color',calcColor(p));
	var per = Math.floor(p/4);
	$('.a-percentage-bar').attr('data-x',per);
	
	$('.b-percentage-bar').width(width-p)
	$('.b-percentage-bar').css('background-color',calcColor(width-p));
	per = 100-per;
	$('.b-percentage-bar').attr('data-x', per);
}

function calcColor(x){
	var R = 255
	var G = 15;
	var tmp = Math.floor(G+x);//取整保证RGB值的准确
	if(tmp <= 255){
		return 'rgb(255,'+tmp+',15)'
	} else {
		R = (R-(tmp-255));
		return 'rgb('+R+',255,15)'
	}
}

 

用了简单JQuery做支撑，需要引入JQuery看效果。