jquerycss实现流程进度条

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

从事绵阳机房托管，服务器租用，云主机，网页空间，域名注册，CDN，网络代维等服务。

方案1：

方案2：

 





 

 

 

 

 

 

 
1
 
 

 
2
 
 

 
3
 
 

 
4
 
 

 
5
 
 
 
 
 

 
 
 
 



 

使用：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。