实现数字滚动的效果(领取红包后余额变化的数

digitScroll

实现数字滚动的效果(领取红包后余额变化的数字滚动效果)

效果预览

效果预览页面

使用方法 包裹数字的容器设置高度,否则默认 30px 例如

<div class="wrapper">当前余额为<div id="digit-scroll"></div>元</div> 创建一个数字滚动实例,传入容器选择器

const digitInstance = new DigitScroll({container:"#digit-scroll"}); 在需要滚动的时候调用 roll 方法

digitInstance.roll(78.48); 注意

装数字的容器是用 flex 布局的,如果要兼容比较低的浏览器版本的话,可以修改一下,把容器的 flex 布局去掉,每个数字的容器用 float:left 即可 即注释

this.container.style.display = "flex";

然后解注释下面这一行

// el.style.float='left';

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。