插件 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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了