jQuery+csss实现简单多彩发光进度条

前言：进度条在onload加载，banner轮播，文件上传进度，注册页面导航等等应用场景的时候很有用，今天我们使用jQuery+css来实现一个简单的多彩发光进度条效果。

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

fierfox浏览器效果如下：

重要知识点:tInterVal定时器，css盒阴影，css圆角，元素尺寸变化拼接技术。

实现思路：指定一个父容器来作为进度条内容的父元素，指定一个进度条内容宽度为0的元素，指定父元素和子元素的样式，设置一个条件定时器tInterVal,判断进度条内容元素的宽度是否小于进度条容器(父元素)的宽度，如果小于等于父元素的宽度，进度条内容元素的宽度+1，通过jquery.css()途径变化内容元素的宽度，不然终止定时器。

实现代码：创建进度条容器和进度条内容元素:

div class=”progressBarBlue” div cla市政排水管道ss=”progressBarContentBlue”/div/div指定进度条容器元素样式，设置宽度为300px,高10px,边框为1px，实体，黑色，设置边框圆角美化进度条，发光效果使用盒阴影box-shadow

.progressBarBlue { width: 300px; margin: 10px auto; height: 10px; border: 1px solid #98AFB7; /**设置为黑色边框**/ border-radius: 5px; /**设置边框圆角属性**/ box-shadow: 0 0 2px 2px aqua; /**x轴偏移和Y轴偏移都设置为0，后面两参数是阴影模糊半径和引用扩展半径**/}指定进度条内容元素样式,高度和父元素坚持一致，宽度设置为0，这时候进度条内容是不展现的，指定背景颜色，设置圆角样式美观！

.progressBarContentBlue { height: inherit; /**高度和父容器坚持一致**/ width: 0; /**初始宽度设置为0，很重要**/ background-color: #5EC4EA; border-radius: 5px化学元素周期表口诀; /**设置边框圆角属性**/}jQuery实现：初始化进度条内容元素的宽度为0，以免出错

获得进度条容器的宽度并且转换为Int类别，便于运算，如果不转换，默认是的string类别

设置定时器，获得进度条内容元素的宽度，判断，小于父元素宽度，子元素内容+1，jquery.css()变化样式，如果大于等于父元素，终止定时器。

$(bars).css(“width”, “0px”); //初始化进度条的宽度//获得父进度条的宽度

parentPgcWidth = parInt($(“.progressBarBlue”).width());//这里统一使用了蓝进度条条的父宽度设定定时器的速度

var pcgSpe夏威夷自由行ed = 10;//单位是毫秒设置定时器

tBar = tInterval(function () { //获得目前pgc的宽度 nowWidth = parInt($(bars).width());//获得目前内容条宽度并且转换成整形 if (nowWidth = parentPgcWidth) { pgcWidth = nowWidth + 1 + “px”; $(bars).css(“width”, pgcWidth); } el { clearInterval(tBar);//达到进度条最重要宽度的时候清除定时器 }}, pcgSpeed);总结：进度条的发光效果是依赖于box-shadow来实现的，box-shadow参数如下：投影方法

X轴偏移,y轴偏移,阴影模糊半径，扩展阴影半径，盒阴影的颜色

投追女孩子的方法影方法默认是的外投影，取值的唯一方法是int，int是内投影

X轴偏移是水平偏移值:值为正的时候投影在对象的右边，为负值的时候投影在对象的左侧

Y轴偏移是垂直偏移值：值为正的时候投影在对象下方，为负值的时候投影在对象的上方

阴影模糊半径就只能为正值，为0的时候不模糊，值越大边缘越模糊

阴影扩展半径可以为正负值，正值的时候阴影周围扩大，负值的时候周围缩小

可以简单理解为阴影模糊就是模糊效果，阴影扩展半径就是模糊周围

在定时器里面，我们计算进度条内容元素的宽度，如果小于父元素，就从头开始赋值给子元素宽度，并通过jquery中的css途径变化了子元素的宽度，实现了进度计算机课程条效果

定时光的第二个参数speed值越大，进度条效果就越慢，是以毫秒为单位

完全版代码：!DOCTYPE htmlhtmlhead meta chart=”utf-8″ titlejQuery实现简单多彩发光进度条/title script src=”