2

私は JavaScript が得意ではありませんが、数字を上方向に数える素敵な小さなアニメーションが欲しいです。Githubでこれを見つけましたが、遅くなります。（小数点以下10桁の数字を数えています）。誰でもそれを変更する方法について何かヒントを得たので、より速くカウントされますか? （データ間隔を縮めようとしましたが、「0」で停滞しています。

<p class="counter" data-interval="0" data-format="999999" data-stop="193847"></p>
4

6 に答える 6

2

jQuery プラグインは必要ありません。.animate を使用するだけです。

jQuery('.counter').each(function(){
  var $elm = this;
  var from = {property: 0};
  var to = {property: $elm.data('stop')};
  var duration = $elm.data('duration');

  jQuery(from).animate(to, {
      duration: duration,
      step: function() {
          $elm.html(this.property);
      }
  });
});

ヒント: jQuery.fx.interval を設定することで、jQuery のフレームレートを最適化できます。デフォルトでは 13 (ミリ秒) です。

その他の例: http://james.padolsey.com/javascript/fun-with-jquerys-animate/

于 2013-07-24T18:03:23.337 に答える
0

あなたが投稿したプラグインから、intervalというオプションがあるようです。デフォルトは 1000 ミリ秒です。カウントが速くなるように減らしてみてください。

そのような何かがうまくいくはずです:

<span></span>

<script>
$('span').addClass('counter counter-analog')
         .counter({
   // several options here
    interval: 1,
    });

</script>

それが役に立てば幸い！

于 2013-05-09T17:32:29.590 に答える
0

誰かが特定の増分でカウンターを増やしたい場合は、次を使用します。

// HTML

<span class="stat-count">10000</span>

//JS

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        current = current + 50; /* Where 50 is increment */

    $this.html(++current);
    if(current > $this.data('count')){
        $this.html($this.data('count'));
    } else {    
        setTimeout(function(){count($this)}, 5);
    }
}        

$(".stat-count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
 });

});

特定の制限、カウント時間、およびカウント単位でのページ読み込み時の Jquery カウント数。

于 2013-10-22T15:37:11.773 に答える