jquery数字增加动画特效

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

 13573  40  查看评论 (0)
jquery数字增加动画特效 ie兼容6

jQuery数字动画插件,添加一些属性和阶跃函数jQuery的动画功能特性。

需要jQuery 1.7.0或更高(2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.0)。

简单的例子

html

<p>Fun level <spanid="fun-level"style="color: red; font-size: 0px;">0 %</span>.</p>

js

// animateNumber accepts same arguments, as animate does
// it adds only 'number' and 'numberStep' params
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', // require jquery.color
    'font-size': '50px',
    easing: 'easeInQuad', // require jquery.easing
    // optional custom step function
    // using here to keep '%' sign after number
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);
      target.text(floored_number + ' %');
    }
  },
  1800
);


相关插件-动画效果

canvas 雨滴

这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度。
  动画效果
 5214  79
  动画效果
 17452  115

jQuery+HTML5相应式文字粒子动画

jQuery+HTML5相应式文字粒子动画,使用canvas的。请在服务器环境下运行。
  动画效果
 23429  313

漂亮雨滴效果

css3,sass实现漂亮雨滴效果
  动画效果
 17531  165

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复