jQuery实现html可联动的百分比进度条-创新互联

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

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对活动板房等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。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实现html可联动的百分比进度条-创新互联

其他资讯