非常简单好用的一个数字滚动插件countUP

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

 65422  424  查看评论 (15)
分享到微信朋友圈
X
非常简单好用的一个数字滚动插件countUP ie兼容6

插件的使用很简单:

demo:给下面的数字添加滚动功能:

<body>
    <div class="timer">18362.86</div>
</body>

首先引入jq和js插件,

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.countUp.js"></script>

然后,给JQuery 添加方法,设置参数,

<script type="text/javascript">
    //调用案例,需要在被调用的标签内 写上最终的数值
    jQuery(function($) {
        $(".timer").countTo({
            lastSymbol:" %", //显示在最后的字符
            from: 0,  // 开始时的数字
            speed: 2000,  // 总时间
            refreshInterval: 10,  // 刷新一次的时间
            beforeSize:0, //小数点前最小显示位数,不足的话用0代替 
            decimals: 2,  // 小数点后的位数,小数做四舍五入
            onUpdate: function() {
            },  // 更新时回调函数
            onComplete: function() {
                for(i in arguments){
                    console.log(arguments[i]);
                }
            }
        });
    });
</script>


相关插件-动画效果

3D云 (酷!)

3D云在云端!
  动画效果
 77814  1554

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 46792  355

超级好看的花瓣表白网页源码

超级好看的花瓣表白网页源码
  动画效果
 65395  600

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 40760  289

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

    obsession 0
    2019/5/23 17:51:40
    可以一直滚动不停止吗不限值 回复
    zxc 0
    2018/11/7 18:28:36
    易燃易爆品 0
    2018/1/26 16:37:38

    没有jq币  能发一份嘛709808980@qq.com  谢谢大神

    回复
    微笑着,让一切变成悲伤? 0
    2017/10/19 16:09:10

    如果结合swiper使用的话,滑动过快这个数字就乱了.

    回复
    小桥流水 0
    2017/9/1 11:24:18

    怎么让页面滚动到数字的时候才运行?

        qq0
        2017/9/12 10:10:28

        滚动到数字时候再执行下面的函数

    回复
    ??故事很简单 刚好我喜欢 0
    2017/8/17 10:05:20
    fang兰夏 0
    2017/5/21 14:54:02

    这个每个数字上的背景颜色怎么加啊

        James0
        2017/7/17 10:53:28

        6

    回复
    ZHAO_ 0
    2017/1/17 16:15:40

    棒棒的

        ZHAO_0
        2017/1/17 16:16:14

        qq0
        2017/2/9 11:25:01

        嘿嘿 多交流交流

        小桥流水0
        2017/9/1 11:25:44

        怎么让页面滚动到数字的时候才运行?

    回复
    KaMe翼 0
    2017/1/4 16:01:39

    不错找了蛮久了,总算找到一个后面可以加符号的

        qq0
        2017/1/6 11:01:48

        ^_^

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复