iTakeo

数字滚动。

只有简单的滚动,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。



点击这里下载文件

2017/07/10 3 / /
标签:  暂无标签

评论回复

  1. 回复 25131

    😛 🙁 哈哈哈

  2. 回复 匿名

    🙁 你好

  3. 回复 路过的野生拖鞋

    针不戳!

验证码: 3 + 5 =

回到顶部