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


Posted in jQuery onMarch 26, 2020

最近需要一个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, 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看效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
You might like
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javaScript call 函数的用法说明
2010/04/09 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
ant design实现圈选功能
2019/12/17 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
python动态网页批量爬取
2016/02/14 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
pyspark 随机森林的实现
2020/04/24 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
市场营销方案范文
2014/03/11 职场文书
授权委托书范本
2014/04/03 职场文书
运动会稿件100字
2014/09/24 职场文书
2014年法院工作总结
2014/11/24 职场文书
优秀教师推荐材料
2014/12/16 职场文书
应急管理工作总结2015
2015/05/04 职场文书
就业推荐表院系意见
2015/06/05 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python中如何对多变量连续赋值
2021/06/03 Python