countUp计数器数字滚动

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

 26831  237  查看评论 (3)
分享到微信朋友圈
X
countUp计数器数字滚动 ie兼容7

更新时间:2020-07-30 01:13:43

更新说明:插件调用js代码优化:

$(function() {
    var countCXArr = [];
    var countCX = function() {
        $('.numCount').each(function(i, dom) {
            if (countCXArr[i] && countCXArr[i] === true) {
                return;
            }
            var sT;
            var ncTop;
            sT = $(window).scrollTop();
            ncTop = $(dom).offset().top;
            var id, decimals, startVal, endVal, duration;
            if (sT > ncTop - $(window).height() && sT < ncTop) {
                $(dom).find('.numCX').each(function() {
                    id = $(this).attr('id');
                    decimals = $(this).attr('data-decimals'), startVal = $(this).attr('data-startVal'), endVal = $(this).attr('data-endVal'), duration = $(this).attr('data-speed');
                    new CountUp(id, startVal, endVal, decimals, duration, {
                        useEasing: true, //效果                       
                        separator: '' //数字分隔符                
                    }).start();
                    // target:目标元素id, 
                    startVal: 你想要开始的值, endVal: 你想要到达的值, decimals: 小数位数, 默认值为0, duration: 动画持续时间为秒, 默认值为2, options: 选项的可选对象 countCXArr[i] = true;
                })
            }
        })
    }
    countCX();
    $(window).on("scroll", function() {
        countCX();
    })
});

更新时间:2020-07-23 01:05:59

相关插件-动画效果,滚动

超级牛B的js效果

跟上一个心的形状用的类似的方法。不用我多说,看了就知道有多牛B了哦。可兼容手机。暂停之后一个手指拖动改变视角,两个手指可以调整视角的大小,三个手指可以移动。
  动画效果
 58308  331

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 38722  437

three.js可旋转地球

使用three.js编写可旋转地球
  动画效果
 49982  348

新年快乐粒子烟花

根据其他插件改编拜年烟花效果
  动画效果
 44717  447

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

    浅浅笑 0
    2023/9/22 11:23:52
    可以延时滚动吗 回复
    尹?? 0
    2021/11/29 15:16:37
    如果我想一直滚动怎么完成这种效果写个定时器好像并不起作用
        bζ ank ′ 1
        2022/10/25 10:53:10

        写个计时器 然后把数组清空就可以了

        setInterval(function(){
                    countCXArr=[]
                countCX()
        },5000)
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复