本文實(shí)例為大家分享了jquery css實(shí)現(xiàn)流程進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下

從事綿陽機(jī)房托管，服務(wù)器租用，云主機(jī)，網(wǎng)頁空間，域名注冊(cè)，CDN，網(wǎng)絡(luò)代維等服務(wù)。

方案1：

方案2：

 





 

 

 

 

 

 

 
1
 
 

 
2
 
 

 
3
 
 

 
4
 
 

 
5
 
 
 
 
 

 
 
 
 



 

使用：

1.首先要引入一個(gè)jquery.js

2.CSS：

:root開始所有css(css基本上都使用的變量，改樣式只需要改:root里的變量值就行)

3.JS：

保留所有js方法
調(diào)用loadProgress(1000,2)方法，傳入進(jìn)度條長度、最后一個(gè)激活節(jié)點(diǎn)下標(biāo)(0到節(jié)點(diǎn)的length-1)
186行設(shè)置了整體相對(duì)于父級(jí)div居中，自己看需求改一下就好

4.標(biāo)簽：

主要就是class="progress_line_no"的div里的所有元素,最里面的兩層div就是節(jié)點(diǎn),class="progress_text"的div是文字,它們的父級(jí)div是圓點(diǎn)

5.激活節(jié)點(diǎn)優(yōu)先級(jí)

loadProgress(width,index)方法傳入index為最高級(jí)別,其次是div上class="progress_node_currentActive",最后默認(rèn)0

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。