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

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

创新互联建站长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为濮阳县企业提供专业的成都网站设计、网站制作，濮阳县网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

jquery是什么

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

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

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

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 < 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实现html可联动的百分比进度条

jquery是什么

其他资讯