jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條-創(chuàng)新互聯(lián)

這篇文章主要介紹jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對(duì)活動(dòng)板房等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。jquery是什么

jquery是一個(gè)簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

最近需要一個(gè)HTML可以聯(lián)動(dòng)的百分比進(jìn)度條，網(wǎng)上找了一下沒有，自己手動(dòng)實(shí)現(xiàn)了一個(gè)。

需要解決的問題，AB兩個(gè)進(jìn)度條需要按照百分比A+B=100%，A進(jìn)度條可以拖動(dòng)，B進(jìn)度條聯(lián)動(dòng)，并且有進(jìn)度顏色的變化。實(shí)現(xiàn)功能如下：

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值的準(zhǔn)確
 if(tmp <= 255){
 return 'rgb(255,'+tmp+',15)'
 } else {
 R = (R-(tmp-255));
 return 'rgb('+R+',255,15)'
 }
}

以上是“jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article46/ejghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、電子商務(wù)、虛擬主機(jī)、云服務(wù)器、網(wǎng)站改版、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容