首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery css实现流程进度条

Posted in jQuery onMarch 26, 2020

本文实例为大家分享了jquery css实现流程进度条的具体代码，供大家参考，具体内容如下

方案1：

jquery css实现流程进度条

方案2：

jquery css实现流程进度条

<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<title>流程进度条</title>
<style type="text/css"> 
 .div_home{
 width: 100%;
 height: 720px;
 background: pink;
 }
 .div_button{
 width: 100%;
 background: rgba(249, 214, 81, 1);
 text-align: center;
 }
 
 :root {
 --progress_div-height: 100px;
 --progress_div-width: 100%;
 --progress_div-background: rgba(204,232,207,1);
 
 --progress_line-top: 50px;
 --progress_line-height: 4px;
 
 --progress_node-height: 20px;
 --progress_node-width: 20px;
 --progress_node-top: -8px;
 --progress_node-lineHeight: 20px;
 
 --progress_text-heigth: 20px;
 --progress_text-width: 120px;
 --progress_text-top: -30px;
 
 --progress_color-yes: rgba(40 ,200 ,252 ,1);
 --progress_color-no: rgba(213 ,213 ,213 ,1);
 }
 .progress_div{
 height: var(--progress_div-height);
 width: var(--progress_div-width);
 background: var(--progress_div-background);
 text-align: center;
 margin: auto 0;
 }
 /*灰条样式*/
 .progress_line_no{
 position: relative;
 top: var(--progress_line-top);
 height: var(--progress_line-height);
 background: var(--progress_color-no);
 }
 /*蓝条样式*/
 .progress_line_yes{
 height: var(--progress_line-height);
 background: var(--progress_color-yes);
 }
 /*未激活节点样式*/
 .progress_node_no{
 position: absolute;
 border-radius: 100%;
 width: var(--progress_node-width);
 height: var(--progress_node-height);
 top: var(--progress_node-top);
 line-height: var(--progress_node-lineHeight);
 background: var(--progress_color-no);
 color: var(--progress_color-no);
 }
 /*已激活节点样式*/
 .progress_node_yes{
 position: absolute;
 border-radius: 100%;
 width: var(--progress_node-width);
 height: var(--progress_node-height);
 top: var(--progress_node-top);
 line-height: var(--progress_node-lineHeight);
 background: var(--progress_color-yes);
 color: var(--progress_color-yes);
 }
 /*节点文字*/
 .progress_text{
 position: absolute;
 vertical-align: middle;
 text-align: center;
 width: var(--progress_text-width);
 height: var(--progress_text-heigth);
 top: var(--progress_text-top);
 }
 /*当前激活节点标记*/
 .progress_node_currentActive{
 }
</style>
</head>
 
<body>
 <div class="div_home">
 <div class="progress_div">
 <div class="progress_line_no">
 <div class="progress_line_yes">
 <div>
 <div class="progress_text">1</div>
 </div>
 <div>
 <div class="progress_text">2</div>
 </div>
 <div>
 <div class="progress_text">3</div>
 </div>
 <div class="progress_node_currentActive">
 <div class="progress_text">4</div>
 </div>
 <div>
 <div class="progress_text">5</div>
 </div>
 </div>
 </div>
 </div>
 <div class="div_button">
 <input type="button" οnclick="skipNode(-1)" value="上一步">
 <input type="button" οnclick="skipNode(1)" value="下一步">
 </div>
 </div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(function(){
 //传入灰条长度,传入最后一个激活节点下标
 loadProgress(1000 ,2);
 });
 
 //上一步type=-1,下一步type=1
 function skipNode(type){
 var currentNum = 0;
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;
 //获取当前激活节点的下标
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 //当前为first,上一步无效;当前为last,下一步无效
 if((type == -1 && currentNum == 0) || (type == 1 && currentNum == countNum - 1)){
 return;
 }
 //重新设置激活节点标记
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 $(data).removeClass();
 if(type == -1 && currentNum - 1 == i){
 $(data).addClass('progress_node_currentActive');
 }
 if(type == 1 && currentNum + 1 == i){
 $(data).addClass('progress_node_currentActive');
 }
 });
 //重新载入流程进度条样式(传入原进度条长度)
 loadProgress($('.progress_line_no').width());
 }
 
 //加载流程进度条,inLineWidth进度条长度,inCurrentNum最后一个激活节点下标(从0开始到length-1)
 function loadProgress(inLineWidth ,inCurrentNum){
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;//总节点数
 var currentNum;//当前激活节点下标
 
 //当前激活节点优先级:loadProgress()方法传入为最高级别,其次是div上class="progress_node_currentActive",最后默认0
 if(inCurrentNum != undefined && inCurrentNum > -1 && inCurrentNum < countNum){
 //传入的节点正确取传入的节点为当前激活节点
 currentNum = inCurrentNum;
 } else {
 //存入的节点不正确,根据节点上的progress_node_currentActive设置当前激活节点
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 }
 if(currentNum == undefined){
 //未传入节点或传入的节点不正确 且div上没发现progress_node_currentActive标识,设置当前激活节点为0
 currentNum = 0;
 }
 
 var line_width_no = inLineWidth;//灰条长度
 var line_width_yes;//蓝条长度
 var node_distance = line_width_no / (countNum - 1);//两点间距
 var node_mid_distance = node_distance / 2;//两点中距(间距/2)
 
 $('.progress_line_no').width(line_width_no + 'px');//设置灰条长度
 $('.progress_line_no').css('left' ,($('.progress_line_no').parent().width() - line_width_no) / 2 + 'px');//设置灰条相对于父级div居中偏移
 
 //设置节点和文字
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 $(data).removeClass();//移除所有样式
 //设置当前激活节点为progress_node_currentActive
 if(currentNum == i){
 $(data).addClass('progress_node_currentActive');
 }
 if(i == 0){
 //设置first节点
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else if(i <= currentNum){
 //设置激活节点
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else{
 //设置未激活节点
 $(data).addClass('progress_node_no').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }
 //设置文字偏移位置
 $(data).children().css('left' ,-($(data).children().width() / 2) + 10+'px');
 });
 
 /*方案1,计算蓝条长度
 */
 line_width_yes = line_width_no * currentNum / (countNum - 1);
 
 /*方案2,计算蓝条长度
 if(currentNum == 0){
 //first节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * 1;
 }else if(currentNum == countNum - 1){
 //last节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * (countNum - 1) * 2;
 }else{
 //中间节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * (currentNum * 2 + 1);
 }
 */
 
 //设置蓝条长度
 $('.progress_line_yes').width( line_width_yes + 'px');
 }
</script>
</body>
 
</html>

使用：

1.首先要引入一个jquery.js

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

2.CSS：

:root开始所有css(css基本上都使用的变量，改样式只需要改:root里的变量值就行)

3.JS：

保留所有js方法
调用loadProgress(1000,2)方法，传入进度条长度、最后一个激活节点下标(0到节点的length-1)
186行设置了整体相对于父级div居中，自己看需求改一下就好

4.标签：

主要就是class="progress_line_no"的div里的所有元素,最里面的两层div就是节点,class="progress_text"的div是文字,它们的父级div是圆点

5.激活节点优先级

loadProgress(width,index)方法传入index为最高级别,其次是div上class="progress_node_currentActive",最后默认0

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

jquery css实现流程进度条

- Author -

逍?狼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现增删改查
Dec 22 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
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
.NET Framework(2) 粒子对撞机(1) 国际空间站(1) IIS7(1) 磁盘分区(1) 界面设计(1) DNS服务器(2) 夸克(1) FTP服务器(1) 对撞机(1)
You might like
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
Cookie 小记
2010/04/01 Javascript
javascript数组的使用
2013/03/28 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
King Apparel官网：英国街头服饰品牌
2019/09/05 全球购物
Timberland德国官网：靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
采购助理岗位职责
2014/02/16 职场文书
保密承诺书
2014/03/27 职场文书
校庆活动方案
2014/03/31 职场文书
会议欢迎标语
2014/06/30 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年春节标语口号
2014/12/09 职场文书
博士导师推荐信
2015/03/25 职场文书
会计专业自荐信范文
2019/05/22 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS