注册送365体验金-「开源解析」一款老虎机抽奖的数字滚动js组件

2020-01-08 16:32:14 来源: 网络

注册送365体验金-「开源解析」一款老虎机抽奖的数字滚动js组件

注册送365体验金,数字滚动组件

最近遇到一个数字模拟老虎机滚动的问题,以前有做过几次。但是都没有对它进行沉淀,这次觉得应该把这个东西沉淀一下,方便日后使用。本组件主要针对移动端面。如果是pc端可能在低版本浏览器下会出问题。

使用方法

下载本项目的numbers.js。然后在需要的页面中引用本,在需要使用数字滚动的容器元素中添加一个叫halo-number-scroll的属性值,并在容器内添加做为容器的第一个元素。如下:

一款老虎机抽奖的数字滚动js组件

简单的用法如下:

一款老虎机抽奖的数字滚动js组件

定制滚动方式

可以针对具体情况,对数字滚动做定制。

定制可以分成两种形式:

统一定制

一般在初始化滚动对象时,传入参数对象即可,如下:

也可以通过,滚动对象的set方法来后期定制,如下:

单独定制

有时候,一个页面内有多个数字滚动,并且每个滚动的具体定制不同,无法统一通过numbers.set(...)来完成。numberscroller组件可以通过数字滚动容器的属性来完成单独定制。

如下:

窗口的属性名与定制对象的成员名一致!!具体使用方式,可以查看demo.html页面

使用图片,可以查看 images.html

作者 | 大神神码 | 蚂蚁开源社区大神,资深前端工程师

代码比较多,请点击了解更多-演示/下载demo源码!


加拿大28app

相关新闻