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

这篇文章主要介绍jQuery实现html可联动的百分比进度条，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

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

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

HTML代码：

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

CSS代码：

.percentage-container{
margin:20pxauto;
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:inset01px2pxrgba(0,0,0,0.25),01pxrgba(255,255,255,0.08);
box-shadow:inset01px2pxrgba(0,0,0,0.25),01pxrgba(255,255,255,0.08);
}

.a-percentage-bar{
position:relative;
height:16px;
border-radius:4px;
-webkit-transition:0.2slinear;
-moz-transition:0.2slinear;
-o-transition:0.2slinear;
transition:0.2slinear;
-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:001px1pxrgba(0,0,0,0.25),inset01pxrgba(255,255,255,0.1);
box-shadow:001px1pxrgba(0,0,0,0.25),inset01pxrgba(255,255,255,0.1);
background:url("img/stripes.png")00repeat;
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:inset01px2pxrgba(0,0,0,0.25),01pxrgba(255,255,255,0.08);
box-shadow:inset01px2pxrgba(0,0,0,0.25),01pxrgba(255,255,255,0.08);
}

.b-percentage-bar{
position:relative;
height:16px;
border-radius:4px;
-webkit-transition:0.2slinear;
-moz-transition:0.2slinear;
-o-transition:0.2slinear;
transition:0.2slinear;
-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:001px1pxrgba(0,0,0,0.25),inset01pxrgba(255,255,255,0.1);
box-shadow:001px1pxrgba(0,0,0,0.25),inset01pxrgba(255,255,255,0.1);
background:url("img/stripes.png")00repeat;
background-color:#FF5400;
}

JS代码：

$(document).ready(function(){
varw=$('.a-percentage').width();
varpos_x=$('.a-percentage').offset().left;
varinti_x=$('.a-percentage').attr('data-x')*4;
setProgressAndColor(inti_x,w);

$('.a-percentage').click(function(e){
varx=e.originalEvent.x||e.originalEvent.layerX||0;
x=x-pos_x;
if(x>0&&x<w){
setProgressAndColor(x,w);
}
});
});

functionsetProgressAndColor(p,width){
$('.a-percentage-bar').width(p)
$('.a-percentage-bar').css('background-color',calcColor(p));
varper=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);
}

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

以上是“jQuery实现html可联动的百分比进度条”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！