前言:进度条在onload加载,banner轮播,文件上传进度,注册页面导航等等应用场景的时候很有用,今天我们使用jquery+css来实现一个简单的多彩发光进度条效果。
小提示:完整版源码在教程最下方!
fierfox浏览器效果如下:
![bbe500f64a8a6f6a26e80bf9830dfab9.png](https://i-blog.csdnimg.cn/blog_migrate/c5119c5017835369c417fc8b7aa676d2.jpeg)
关键知识点:
setInterVal定时器,css盒阴影,css圆角,元素尺寸改变拼接技术。
实现思路:
指定一个父容器来作为进度条内容的父元素,指定一个进度条内容宽度为0的元素,指定父元素和子元素的样式,设置一个条件定时器setInterVal,判断进度条内容元素的宽度是否小于进度条容器(父元素)的宽度,如果小于等于父元素的宽度,进度条内容元素的宽度+1,通过jquery.css()方法改变内容元素的宽度,否则停止定时器。
实现代码:
创建进度条容器和进度条内容元素:
指定进度条容器元素样式,设置宽度为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