前言：進(jìn)度條在onload加載，banner輪播，文件上傳進(jìn)度，注冊(cè)頁(yè)面導(dǎo)航等等應(yīng)用場(chǎng)景的時(shí)候很有用，今天我們使用jquery+css來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的多彩發(fā)光進(jìn)度條效果。

小提示：完全版源碼在教程最下方！

fierfox瀏覽器效果如下：

重要知識(shí)點(diǎn):setInterVal定時(shí)器，css盒陰影，css圓角，元素尺寸變化拼接技術(shù)。

實(shí)現(xiàn)思路：指定一個(gè)父容器來(lái)作為進(jìn)度條內(nèi)容的父元素，指定一個(gè)進(jìn)度條內(nèi)容寬度為0的元素，指定父元素和子元素的樣式，設(shè)置一個(gè)條件定時(shí)器setInterVal,判斷進(jìn)度條內(nèi)容元素的寬度是否小于進(jìn)度條容器(父元素)的寬度，如果小于等于父元素的寬度，進(jìn)度條內(nèi)容元素的寬度+1，通過(guò)jquery.css()途徑變化內(nèi)容元素的寬度，不然終止定時(shí)器。

實(shí)現(xiàn)代碼：創(chuàng)建進(jìn)度條容器和進(jìn)度條內(nèi)容元素:

div class=”progressBarBlue” div class=”progressBarContentBlue”/div/div指定進(jìn)度條容器元素樣式，設(shè)置寬度為300px,高10px,邊框?yàn)?px，實(shí)體，黑色，設(shè)置邊框圓角美化進(jìn)度條，發(fā)光效果使用盒陰影box-shadow

.progressBarBlue { width: 300px; margin: 10px auto; height: 10px; border: 1px solid #98AFB7; /**設(shè)置為黑色邊框**/ border-radius: 5px; /**設(shè)置邊框圓角屬性**/ box-shadow: 0 0 2px 2px aqua; /**x軸偏移和Y軸偏移都設(shè)置為0，后面兩參數(shù)是陰影模糊半徑和引用擴(kuò)展半徑**/}指定進(jìn)度條內(nèi)容元素樣式,高度和父元素堅(jiān)持一致，寬度設(shè)置為0，這時(shí)候進(jìn)度條內(nèi)容是不展現(xiàn)的，指定背景顏色，設(shè)置圓角樣式美觀！

.progressBarContentBlue { height: inherit; /**高度和父容器堅(jiān)持一致**/ width: 0; /**初始寬度設(shè)置為0，很重要**/ background-color: #5EC4EA; border-radius: 5px; /**設(shè)置邊框圓角屬性**/}jQuery實(shí)現(xiàn)：初始化進(jìn)度條內(nèi)容元素的寬度為0，以免出錯(cuò)

獲得進(jìn)度條容器的寬度并且轉(zhuǎn)換為Int類別，便于運(yùn)算，如果不轉(zhuǎn)換，默認(rèn)是的string類別

設(shè)置定時(shí)器，獲得進(jìn)度條內(nèi)容元素的寬度，判斷，小于父元素寬度，子元素內(nèi)容+1，jquery.css()變化樣式，如果大于等于父元素，終止定時(shí)器。

$(bars).css(“width”, “0px”); //初始化進(jìn)度條的寬度//獲得父進(jìn)度條的寬度

parentPgcWidth = parseInt($(“.progressBarBlue”).width());//這里統(tǒng)一使用了藍(lán)進(jìn)度條條的父寬度設(shè)定定時(shí)器的速度

var pcgSpeed = 10;//單位是毫秒設(shè)置定時(shí)器

setBar = setInterval(function () { //獲得目前pgc的寬度 nowWidth = parseInt($(bars).width());//獲得目前內(nèi)容條寬度并且轉(zhuǎn)換成整形 if (nowWidth = parentPgcWidth) { pgcWidth = nowWidth + 1 + “px”; $(bars).css(“width”, pgcWidth); } else { clearInterval(setBar);//達(dá)到進(jìn)度條最重要寬度的時(shí)候清除定時(shí)器 }}, pcgSpeed);總結(jié)：進(jìn)度條的發(fā)光效果是依賴于box-shadow來(lái)實(shí)現(xiàn)的，box-shadow參數(shù)如下：投影方法

X軸偏移,y軸偏移,陰影模糊半徑，擴(kuò)展陰影半徑，盒陰影的顏色

投影方法默認(rèn)是的外投影，取值的唯一方法是inset，inset是內(nèi)投影

X軸偏移是水平偏移值:值為正的時(shí)候投影在對(duì)象的右邊，為負(fù)值的時(shí)候投影在對(duì)象的左側(cè)

Y軸偏移是垂直偏移值：值為正的時(shí)候投影在對(duì)象下方，為負(fù)值的時(shí)候投影在對(duì)象的上方

陰影模糊半徑就只能為正值，為0的時(shí)候不模糊，值越大邊緣越模糊

陰影擴(kuò)展半徑可以為正負(fù)值，正值的時(shí)候陰影周圍擴(kuò)大，負(fù)值的時(shí)候周圍縮小

可以簡(jiǎn)單理解為陰影模糊就是模糊效果，陰影擴(kuò)展半徑就是模糊周圍

在定時(shí)器里面，我們計(jì)算進(jìn)度條內(nèi)容元素的寬度，如果小于父元素，就從頭開始賦值給子元素寬度，并通過(guò)jquery中的css途徑變化了子元素的寬度，實(shí)現(xiàn)了進(jìn)度條效果

定時(shí)光的第二個(gè)參數(shù)speed值越大，進(jìn)度條效果就越慢，是以毫秒為單位

完全版代碼：!DOCTYPE htmlhtmlhead meta charset=”utf-8″ titlejQuery實(shí)現(xiàn)簡(jiǎn)單多彩發(fā)光進(jìn)度條/title script src=”