jQuery實現html可聯動的百分比進度條
阿新 • • 發佈:2020-03-27
最近需要一個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.25); border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0.25),0 1px rgba(255,255,0.08); box-shadow: inset 0 1px 2px rgba(0,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,inset 0 1px rgba(255,0.1); box-shadow: 0 0 1px 1px rgba(0,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.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,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+',15)' } }
用了簡單JQuery做支撐,需要引入JQuery看效果。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。