jquery数字动画插件Animate Number

所属分类:其他-动画效果

 59576  352  查看评论 (3)
分享到微信朋友圈
X
jquery数字动画插件Animate Number ie兼容6

示例1:简单的动画

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


示例2:分隔符

<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
  }
);

示例3:多个属性

<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',
    easing: 'easeInQuad',
    numberStep: percent_number_step
  },
  15000
);

示例4:自定义号码步骤处理程序

<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'
  }
);

示例5:自定义动画起始点

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

示例6:小数

<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 : decimal_places * 10;
$('#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
  );

例7:反向倒计时

<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'
  );
相关插件-动画效果

基于three.js雪花效果

基于three.js开发的雪花飘落效果,跟随鼠标
  动画效果
 29329  272

漂亮雨滴效果

css3,sass实现漂亮雨滴效果
  动画效果
 45086  511

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 46709  472

html5浪漫粒子表白

html5粒子效果浪漫表白特效
  动画效果
 71646  384

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    L 0
    2016/11/21 11:11:06
    SKaYi精选音乐推荐 0
    2014/11/4 3:54:10
    不可不戒 0
    2014/8/4 23:28:00
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复