前端:Odometer.js 实现数字滚动效果

 

使用该插件需要引入:

<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

另外官方提供了几个其他主题样式如:

odometer-theme-default.css等

最简单的使用:

<div id="my_odometer" class="odometer">0</my_odometer>

<script>
  //滚动数字
  setTimeout(function(){
    my_odometer.innerHTML = 26004;
  }, 500);
</script>

也可以自定义使用:

var el = document.querySelector('.my_odometer');
            od = new Odometer({
                el: el,
                value: '00000000',
                duration: 1000,
                // Any option (other than auto and selector) can be passed in here
                format: '(,ddd).dd',
                theme: 'default',
                animation: 'count'
            });


od.update(123456)

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值