当前位置: 编程技术>WEB前端
jquery实现的一个简单进度条效果实例
来源: 互联网 发布时间:2014-08-25
本文导语: jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。 效果演示: 进度条实现源码: 代码如下:jquery实现进度条 .progressBar{width:200px;height:8px;border:...
jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。
效果演示:
进度条实现源码:
代码如下:
jquery实现进度条
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
function progressBar(){
//初始化js进度条
$("#bar").css("width","0px");
//进度条的速度,越小越快
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//宽度要不能大于进度条的总宽度
if(nowWidth