jQuery實現(xiàn)html可聯(lián)動的百分比進度條

更新時間：2020年03月26日 10:58:46 作者：雁柳

這篇文章主要介紹了jQuery實現(xiàn)html可聯(lián)動的百分比進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

需要解決的問題，AB兩個進度條需要按照百分比A+B=100%，A進度條可以拖動，B進度條聯(lián)動，并且有進度顏色的變化。實現(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值的準確
 if(tmp <= 255){
 return 'rgb(255,'+tmp+',15)'
 } else {
 R = (R-(tmp-255));
 return 'rgb('+R+',255,15)'
 }
}

用了簡單JQuery做支撐，需要引入JQuery看效果。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

利用jquery獲取select下拉框的值
本篇文章主要介紹了利用jquery獲取select下拉框的值，如果你jquery不是特別熟練，每次使用不常用的就要百度。那么這篇文章應該會有所幫助，需要的朋友可以過來參考下
2016-11-11
jquery圖片放大鏡效果
這篇文章主要為大家詳細介紹了jquery圖片放大鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
基于jquery實現(xiàn)瀑布流布局
這篇文章主要介紹了基于jquery實現(xiàn)瀑布流布局的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
自己動手開發(fā)jQuery插件教程
首先要了解jQuery插件開發(fā)分兩種，1.類級別的插件開發(fā)。2.對象級別插件開發(fā)。什么? 你居然問什么是類級別和什么是對象級別?
2011-08-08
jQuery中get和post方法傳值測試及注意事項
jQuery 的 get 和 post 方法有三個參數(shù)：地址，數(shù)據(jù) 和回調(diào)函數(shù)，剛剛做了幾個實驗，看看下面的代碼就清楚了
2014-08-08
用jquery統(tǒng)計子菜單的條數(shù)示例代碼
統(tǒng)計子菜單條數(shù)的方法有很多，在本文為大家詳細介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友不要錯過
2013-10-10
jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁
這篇文章主要介紹了jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁的相關資料,需要的朋友可以參考下
2016-04-04
JQuery+div+css 無限級聯(lián)樹實現(xiàn)代碼
JQuery+div+css 無限級聯(lián)樹實現(xiàn)代碼，需要的朋友可以參考下。
2010-03-03
jQuery實現(xiàn)的記住帳號密碼功能完整示例
這篇文章主要介紹了jQuery實現(xiàn)的記住帳號密碼功能,結(jié)合完整實例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關操作技巧,需要的朋友可以參考下
2019-08-08
jQuery實現(xiàn)的Email中的收件人效果（按del鍵刪除）
基于jquery實現(xiàn)的Email中的收件人效果，可通過del鍵刪除，需要的朋友可以參考下。
2011-03-03