只有简单的滚动,js采用了ES6编写,尽量使用chrome浏览器来查看,可以使用babel转成ES5,或者通过babel的网站在线转换。动画使用css3。
以下是调用接口
var odo1 = new Odometer('.Odometer',{ len : null, //设置默认位数 num : "", //初始化值 speed : 1000, //动画速度 symbol : '', //分割符 dot : 0 //保留几位小数点 }); odo1.update(123) //更新数字01.
02.
03.
04.
05.
06.
07.
08.
以下是基本的css
.number-animate{line-height:45px; height: 45px;font-size: 40px;overflow: hidden; display: inline-block; position: relative; } .number-animate .number-animate-dot{ width: 21px; float: left; text-align: center;} .number-animate .number-animate-dom{ width: 27px; text-align: center; float: left; position: relative; top: 0;} .number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 45px;line-height: 1;}01.
02.
03.
04.
以下是几个基本例子。
数字滚动。
数字滚动2。
数字滚动3。
😛 🙁 哈哈哈
🙁 你好
针不戳!