我有这个jQuery代码
function SetFilesNeeded( needed ) {
$("#neededFiles").text(needed);
}
function SetFilesTotal( total ) {
$("#totalFiles").text(total);
}
SetFilesNedded
函数是需要多少文件,每次值needed
更改时都会调用它。 SetFilesTotal
是文件总数。
我想制作一个宽度为580px的加载栏。我的CSS加载栏:
#loadBar2 {
border-radius: 5px;
background: #99FF99;
padding: 5px;
width: 580px;
height: 10px;
top: -823px;
left: 50%;
margin-left: -290px;
margin-top: -100px;
position: relative;
opacity: 0.5;
filter:alpha(opacity = 50);
}
我如何使用jQuery代码将起始宽度设置为1px,并且当添加更多文件时,条形宽度会增加,直到达到最大值(580px)?
答案 0 :(得分:2)
您不需要任何插件来创建简单的加载栏。
Demo: http://jsfiddle.net/bx0273ro/
它基本上是两个div,一个是用作背景的父级,然后是用作进度部分的颜色部分的子级。
条的宽度实际上就是这样:
<强> MaxWidth * ((total-needed)/total)
强>
这是一些动画的代码
var needed, total,
tEle = $('#totalFiles'),
nEle = $('#neededFiles'),
bar = $('#loadingBar'),
width = bar.width();
needed = total = tEle.text();
var t = setInterval(function(){
if (--needed == 0) clearInterval(t);
update();
},500);
function update() {
nEle.text(needed);
bar.find('.bar').width(width * ((total-needed)/total));
}
答案 1 :(得分:1)
如果您需要该功能,我会建议使用这个jQuery加载栏插件。 https://github.com/rstacruz/nprogress
这是非常好的快速解决方案。代码是github上的开源代码,因此您可以看到它是如何实现的。另外在git上你可以找到如何设置插件的快速说明。
如果你卡在某个地方随意问。