jq 进度条倒着展现
时间: 2024-09-15 19:11:49 浏览: 42
在使用JavaScript库JQuery(简称jq)创建进度条时,如果你想让它从满状态开始逐渐减少显示为0%,可以采用动画的方式来实现。通常,我们会在HTML中设置一个`<div>`作为进度条容器,然后使用`.animate()`函数结合CSS样式控制宽度的变化。
例如:
```html
<div id="progress-bar" style="width: 100%; background-color: #ccc;"></div>
```
JS部分:
```javascript
var progressBar = $('#progress-bar');
var startWidth = 100; // 开始宽度,这里是100%
function decreaseProgress() {
var currentWidth = startWidth;
progressBar.animate({
width: currentWidth + '%'
}, {
duration: 1000, // 动画持续时间(毫秒)
easing: 'linear', // 动画缓动效果
complete: function() {
if (currentWidth > 0) {
decreaseProgress(); // 当宽度大于0时,继续递减
}
}
});
}
decreaseProgress();
```
在这个例子中,`decreaseProgress`函数会逐步缩小进度条的宽度,直到变成0%。你可以根据需要调整动画速度、结束条件等参数。
阅读全文