尝试实现滑动进度条不使用gif

Trying to implement a sliding progressbar without using gif

本文关键字：gif 实现      更新时间：2023-09-26

我正在尝试实现滑动进度条。我希望进展能逐渐加快。

我试一试:HTML 

<div id="progressKeeper">
<div id="progress"></div>
</div>
CSS 

#progressKeeper {
    width: 800px;
    height: 25px;
    border: 3px double #003366;
    margin: 0px 10px;
    padding: 3px;
}
JavaScript 

var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
    el.width(el.width() + steppedIncreaseAmount+ 'px');
}

看这个

但它只是突然增加。我想要一个平滑的效果，比如渐变

您需要在这些值的更新之间设置某种延迟。但是，因为看起来您正在使用jQuery，所以您可以轻松地执行如下操作:

$(document).ready(function() {
    var el = $('#progress');
    el.animate({
        width: "100%"
    }, 1800);
});​
http://jsfiddle.net/VbVBP/2/

另一种方法，如果你真的想保持你现在所做的设置，你可以在你的for循环中添加一个setTimeout计数器，像这样: 
var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100; 
for (var i = 0; i < 100; i++) {
    setTimeout(function(){
        el.width(el.width() + steppedIncreaseAmount+ 'px');
    }, 1+i*20);
}​
http://jsfiddle.net/VbVBP/3/

一个简单的for循环更新值的速度比你的眼睛能赶上....

你可以使用像setInterval这样的定时器函数来制作基本的JS动画。它的工作方式是: 
var increase = setInterval(function(){
    el.width(el.width() + steppedIncreaseAmount+ 'px');
}, 50); //50 is the interval in ms, i.e the function inside the interval gets called 20 times per second

当你完成动画时(进度是100%)，你应该取消间隔:

clearInterval(increase);

查看setInterval

上的工作小提琴和MDN文档

如果你想深入了解JavaScript动画的领域，你可能还想了解requestAnimationFrame

尝试使用动画:

el.animate({ width: "+=" + steppedIncreaseAmount }, 500);

哦，不要用javascript。你可以只使用CSS3动画。

@-webkit-keyframes progress { 
    from { }
    to { width: 100% }
}

进度条:

-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;

工作示例:http://jsfiddle.net/VbVBP/4/

我设置了一个demo来演示我能想出的方法。http://jsfiddle.net/VbVBP/5/我将更新时间设置为300ms，并将更新动画的速度设置为300，因此它是持续动画的。

不使用随机值，而是使用完成操作的百分比。

<div id="progressKeeper">
<div id="progress"></div>
</div>​
var randomPercentInt = 0;
function percentComplete(percent) {
    var el = $('#progress');
    el.animate({
        width: percent
    }, 300);
}
$(document).ready(function() {
    percentComplete('0%');
});
function randomPercent() {
    var randomNumber = Math.floor(Math.random() * 10);
    randomPercentInt += randomNumber;
    console.log(randomPercentInt);
    if(randomPercentInt>100)
    {
        randomPercentInt = 100;
        clearInterval(clearme);
    }
    percentString = randomPercentInt.toString() + '%';
    percentComplete(percentString);
}
clearme = setInterval(randomPercent, 300);​
相关文章：