UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jquery轻量级数字动画插件jquery.countup.js

所属分类：其他,UI-动画效果,滚动

 124477  554  查看评论 (54)
分享到微信朋友圈
X
jquery轻量级数字动画插件jquery.countup.js ie兼容8
 查看演示  website  立即下载

插件说明

jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。

该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。

安装

可以通过npm或bower来安装jquery.countup.js插件。

npm install jquery.countup.js
bower install jquery.countup.js

使用方法

在页面引入jquery，jquery.waypoints.min.js和jquery.countup.min.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML结构

使用<span>元素作为数字的容器。

<span class="counter">1,498,547.00</span>
<span class="counter">7.99</span>
<span class="counter">1455455</span>

你也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间。

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

在页面DOM元素加载完毕之后，可以通过countUp()方法来初始化数字动画。

$('.counter').countUp();

也可以在初始化的时候传入配置参数。

$('.counter').countUp({
    delay: 10,
    time: 2000
});

  • delay：每个数字动画的延迟时间，单位毫秒。

  • time：计数动画总的持续时间。


相关插件-动画效果,滚动
查看更多

超酷炫的HTML5页面飘落蒲公英动画

 别人都飘雪，咱们开始飘蒲公英啦！
  动画效果
 45571  647

html5 canvas粒子星空

 html5 canvas鼠标跟随粒子星空动画
  动画效果
 76615  742

基于Three.js 3d波浪墙

 Three.js波浪墙，3D效果
  动画效果
 54284  611

卷轴动画-html5+js完美兼容IE6+

 卷轴动画-html5+js完美兼容IE6+
  动画效果
 50420  476

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

    未命名 0
    2022/7/21 9:40:02
    每次刷新数据。都是用的第一次的值是怎么回事
        西瓜0
        2022/7/21 11:55:05

        刷新存在缓存问题，加个随机数试试

    回复
    未命名 0
    2022/7/16 16:39:15
    如果数值是0，加载的就是上次的值，这是为啥 回复
    我爱吃飞鱼 0
    2021/4/25 16:14:52
    请问一下！鼠标悬停在数字上，才执行数字滚动，要如何调整！
        我爱吃飞鱼0
        2021/4/25 16:21:19
        问题已经解决了，请原谅我问了一个很小白的问题！打扰了！
    回复
    希 0
    2020/3/29 10:52:59

    jquery.countup.min.js 中

    var f = function() {
    e.text(e.data("counterup-nums").shift()), e.data("counterup-nums").length ? setTimeout(e.data("counterup-func"), a) : (e.data("counterup-nums"), e.data("counterup-nums", null), e.data("counterup-func", null))
}

    改为

    var f = function() {
    if (e.data('counterup-nums')) {
        e.text(e.data("counterup-nums").shift()), e.data("counterup-nums").length ? setTimeout(e.data("counterup-func"), a) : (e.data("counterup-nums"), e.data("counterup-nums", null), e.data("counterup-func", null))
    }
}
        律0
        2021/12/16 9:54:21
        改完 一直是NaN啊 还是不生效
        律0
        2021/12/16 9:55:00
        还是不行 一直NaN 不会滚动
    回复
    吖小彬彬 0
    2019/5/16 15:55:59
    Cannot read property 'shift' of null
    at f
    这个问题该如何解决呢？求指教
        青春只为一个等待1
        2019/6/1 14:36:42
        var f = function() {
    if ($this.data('counterup-nums')) { //加个这个判断
        $this.text($this.data('counterup-nums').shift());
        if ($this.data('counterup-nums').length) {
            setTimeout($this.data('counterup-func'), delay);
        } else {
            $this.data('counterup-nums');
            $this.data('counterup-nums', null);
            $this.data('counterup-func', null);
        }
    }
};
        Warning0
        2019/8/16 11:22:51
        没毛病 老铁
        手捧阳光0
        2019/12/20 17:18:13
        代码是加在哪里呢？
    回复
    天空蓝丶 0
    2019/4/13 10:12:56
    怎么让数字只滚动一次啊,源码看不懂 ~.~
        ??艳芬3
        2019/11/15 11:38:30

        waypoint，也就是第一个引入的文件是用于滚动监听的
        倒数几行的位置有一行代码

        $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });

        这行代码的就是用了第一个引入的文件，滚动监听，你滚动到绑定countup数字滚动的标签位置，就会开始滚动数字，
        你如果希望只滚动一次数字，那你就把这句注释掉，自己写滚动监听

        // Perform counts when the element gets into view
// $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
var scrollBool = true;
$(window).on('scroll', function() {
    if ($(window).height() + $(document).scrollTop() >= $this.offset().top && scrollBool) {
        scrollBool = false
        counterUpper();
    }
});
    回复
    神秘的未来 0
    2018/8/19 18:50:25
    怎么让数字滚动只触发一次
        天空蓝丶0
        2019/4/13 9:16:29
        同求,,实现了页面加载鼠标滚动只触发一次
        Johnny1
        2022/1/5 11:04:34
        /* e.waypoint(u, {
offset: "100%",
triggerOnce: !0
}) */
//只滚动一次代码
var scrollBool = true;
$(window).on('scroll', function() {
    if ($(window).height() + $(document).scrollTop() >= e.offset().top && scrollBool) {
        scrollBool = false
        u();
    }
});
    回复
    小冷 1
    2018/8/10 16:43:13

    关于 数据每此都是第一次的数为问题 ；处理下这段代码

    // if(!$this.data('counterupTo')) {
     $this.data('counterupTo',$this.text());
// }

    注释掉  if(!$this.data('counterupTo'))

        jyc01850
        2018/11/4 16:31:47
        谢谢
        　0
        2020/12/28 17:24:02
        没有这一段....
    回复
    小张-迪麦互动 0
    2018/7/15 17:57:28
    var f = function() {
   if ($this.data('counterup-nums')) {
       $this.text($this.data('counterup-nums').shift());
       if ($this.data('counterup-nums').length) {
           setTimeout($this.data('counterup-func'), delay);
       } else {
            $this.data('counterup-nums');
           $this.data('counterup-nums', null);
           $this.data('counterup-func', null);
       }
   }
};

    这个是加在哪里呢，现在报错呢
    Cannot read property 'shift' of null
       at f

        手捧阳光0
        2019/12/20 17:18:45
        你这个问题解决了吗，我现在也是这个错误
        Johnny0
        2022/1/5 10:49:10
        var f = function() {
    if (e.data("counterup-nums")) { //报错另外添加的判断
        e.text(e.data("counterup-nums").shift()), e.data("counterup-nums").length ?
            setTimeout(e.data("counterup-func"), a) : (e.data("counterup-nums"),
                e.data("counterup-nums", null), e.data("counterup-func", null))
    }
};
        Johnny0
        2022/1/5 10:50:16
        把$this看成e就可以了
    回复
    ￡浅笑彡 0
    2018/6/21 13:51:45
    数据用ajax请求到后再出现动画，，数字直接不出现了，，这是什么情况如何解决 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复