jquery数字增加动画特效

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

 10709  33  查看评论 (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
);


相关插件-动画效果

步骤填写表单

美观的填写表单界面
  动画效果
 19439  100

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 14632  136

点击效果Google Design 谷歌的设计团队

效果是 Google Design 也就是谷歌的设计团队博客用到了这个效果 , 当时的第一感觉就是 擦 ,google就是牛逼, 一个按钮点击也要酷到不要不要的了
  动画效果
 9858  143

cs3旋转动画实现地球周转

css33d效果旋转变形
  动画效果
 8508  62

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

取消回复