jquery - 如何从右到左填充 div 宽度？

Question

我正在使用进度条通过 jquery.countTo 完成计数的更新。一个div宽度的默认填充方式是从左到右，有没有办法实现从右到左的填充呢？我正在使用 countTo 的 onUpdate 函数。

$('#cat-'+catNum+' span#asp-1-ev').countTo({
                from: 1,
                to: asp1EV,
                speed:asp1EV*speed,
                onUpdate: function (value) {
                    percent=Math.round(((value/catVotes)*100),2);
                    $('#cat-'+catNum+' span#asp-1-pt').html(percent);
                    $('#cat-'+catNum+' div#asp-1-bar').attr('style','width:'+percent+'%');
                },
            });

标签： jquery

Answer 1

我不知道你是否只想使用 jquery.countTo，但是这个 JS 代码可以正常工作：

您只需要调用move(p, e)函数，并传递要显示的百分比和元素。

function move(percent, element) {
  var elem = document.getElementById(element);   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= percent) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<h1>Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>

<button onclick="move(88, 'myBar')">Go to 88%</button>

参考：

• https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3