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 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery插件实现图片悬浮
Apr 16 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
You might like
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
js tab 选项卡
2009/04/26 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python实现代理服务功能实例
2013/11/15 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python jieba库分词模式实例用法
2021/01/13 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
Weblogc domain问题
2014/01/27 面试题
策划助理岗位职责
2013/11/18 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
采购部经理岗位职责
2014/02/10 职场文书
高中生操行评语大全
2014/04/25 职场文书
简单租房协议书范本
2014/08/20 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2015年中秋节主持词
2015/07/30 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
python批量创建变量并赋值操作
2021/06/03 Python