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是圆点
