jquery css 流程进度条

方案1：

方案2：

<!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=1function 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",最后默认0if(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标识,设置当前激活节点为0currentNum = 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_currentActiveif(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 流程进度条相关推荐

html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
div css实现进度条
div css实现进度条进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条. 我们先看下代码: <div class="progress"> < ...
css样式制作步骤流程进度条
效果图如下 html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改) css样式部分代码第一步:生成一个长方形效果第二步:根据:after在长方形后面生成一个三角形第三步:修改后面三 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
链接主题: 预加载图片延迟加载图片 Lazy Load javascript图片浏览器的核心--图片预加载第一种方法: 页面 Loading 条基本人人都会用.它的原理很简单:在页头放置一个文字或 ...
CSS实现进度条和订单进度条
由于近期需要做一个订单进度条,比较直观的反应当前订单的状态,css样式借鉴了网上的相关代码,下面是效果图,以及实现说明一.说明 1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多 ...
jquery/css实现步骤条
效果图如下: html代码: <div class="order_status"><span class="s-step s-step0"&g ...
ajax 进度条 php,php – Jquery :: Ajax提供进度条？
您可以通过.html()将动画gif加载到结果区域,直到ajax函数返回结果.只是一个想法关于jquery ui进度条,间歇地通过你的脚本,你会想要一个表示完成百分比的数值作为一个赋值的javasc ...
CSS 斜条纹进度条动画
这是第一版进度条 ,用css写的.但是后续因为数据不同,要显示不同的颜色和数据,所以又改了一版,直接用的el-progress.自定义的样式.对于新手小白来说比较友好.先上这一版代码. <div ...

jquery css 流程进度条

jquery css 流程进度条相关推荐

最新文章

热门文章