首页
所有分类
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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 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
transaction(1) Slave(1) 继承(1) 百度地图(1) 封装(1) variables(1) PyAutoGUI(1) Master(1) 主从复制(1) gRPC(3)
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
json 定义
2008/06/10 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
Javascript面向对象编程（二） 构造函数的继承
2011/08/28 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python 多个参数不为空校验方法
2019/02/14 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
加拿大建筑和装修专家：Reno-Depot
2017/12/21 全球购物
英国女性时尚精品店：THE DRESSING ROOM
2018/05/23 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
大学生职业生涯规划大赛作品（精品）
2014/09/17 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript