阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.animateNumber 中文API文档

      插件 jQuery.animateNumber 中文API文档

      源码 & 下载

      例子

      示例:简单动画

      <p>This plugin only <span id="lines">0</span> lines of code.</p>
      
      $('#lines').animateNumber({ number: 165 });
      

      这个插件只有0行代码。

      例:分离器

      <p>World population is <span id="world-population">0</span>.</p>
      
      var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
      $('#world-population').animateNumber(
        {
          number: 7095217980,
          numberStep: comma_separator_number_step
        }
      );
      

      世界人口为0。

      示例:多个属性

      <p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>
      
      var percent_number_step = $.animateNumber.numberStepFactories.append(' %')
      $('#fun-level').animateNumber(
        {
          number: 100,
          color: 'green',
          'font-size': '30px',
      
          numberStep: percent_number_step
        },
        {
          easing: 'swing',
          duration: 15000
        }
      );
      

      乐趣等级0%。

      示例:自定义数字步骤处理程序

      <p>Points per pixel <span id="points">0</span>.</p>
      
      $('#points').animateNumber(
        {
          number: 72,
          numberStep: function(now, tween) {
            var target = $(tween.elem);
      
            target
              .prop('number', now) // keep current prop value
              .text(now);
          },
          'slow'
        }
      );
      

      每像素点数0。

      示例:自定义动画起点

      <p id="ten">From ten to hundred.</p>
      
      $('#ten')
        .prop('number', 10)
        .animateNumber(
          {
            number: 100
          },
          20000
        );
      

      从十到一百。

      例:小数位

      <p id="decimals">From $0,00 to $5,00</p>
      
      // how many decimal places allows
      var decimal_places = 2;
      var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
      
      $('#decimals')
        .animateNumber(
          {
            number: 5 * decimal_factor,
      
            numberStep: function(now, tween) {
              var floored_number = Math.floor(now) / decimal_factor,
                  target = $(tween.elem);
      
              if (decimal_places > 0) {
                // force decimal places even if they are 0
                floored_number = floored_number.toFixed(decimal_places);
      
                // replace '.' separator with ','
                floored_number = floored_number.toString().replace('.', ',');
              }
      
              target.text('$' + floored_number);
            }
          },
          20000
        );
      

      从$ 0,00到$ 5,00

      例:倒数倒计时

      <p id="revese-countdown">10</p>
      
      $('#revese-countdown')
        .prop('number', 10)
        .animateNumber(
          {
            number: 0,
            numberStep: function(now, tween) {
              var target = $(tween.elem),
                  rounded_now = Math.round(now);
      
              target.text(now === tween.end ? 'Launch!' : rounded_now);
            }
          },
          10000,
          'linear'
        );
      

      10

      例:结束动画回调

      <p id="countdown">10</p>
      
      $('#countdown')
        .animateNumber(
          {
            number: 10
          },
          'normal',
          function() {
            $('#countdown').text('Countdown completed!')
          }
        );
      

      0

      示例:带复选框的动画

      <p>
        <label><input type="checkbox" id="checkbox"> use max power</label>
        <br>
        Power: <span id="power">10</span>%
      </p>
      
      <script type="text/javascript">
        var numberStep = function(now, tween) {
          var target = $(tween.elem),
              rounded_now = Math.round(now);
      
          target.prop('number', rounded_now).text(rounded_now);
        };
      
        var use_max_power = $('#checkbox');
        use_max_power.click(function(){
          if ( use_max_power.is(':checked') ) {
            $('#power').stop().animateNumber({
              number: 100,
              numberStep: numberStep
            }, 5000);
          }
          else {
            $('#power').stop().animateNumber({
              number: 10,
              numberStep: numberStep
            }, 5000);
          }
        });
      </script>
      

      功率:10%

      例:零填充数字动画

      <p>
        Signatures gathered: <span id="signatures">000000</span>
        <br>
        <button id="start-campaign">Start campaign</button>
      </p>
      
      <script type="text/javascript">
        var max_number = 100000;
      
        var padding_zeros = '';
        for(var i = 0, l = max_number.toString().length; i < l; i++) {
          padding_zeros += '0';
        }
      
        var padded_now, numberStep = function(now, tween) {
          var target = $(tween.elem),
              rounded_now = Math.round(now);
      
          var rounded_now_string = rounded_now.toString()
          padded_now = padding_zeros + rounded_now_string;
          padded_now = padded_now.substring(rounded_now_string.length);
      
          target.prop('number', rounded_now).text(padded_now);
        };
      
        var use_max_power = $('#checkbox');
        $('#start-campaign').click(function(){
          $('#signatures').animateNumber({
            number: max_number,
            numberStep: numberStep
          }, 5000);
        });
      </script>
      

      收集的签名:000000

      目录
      目录