H5 里程表、轮盘、数字滚动效果，使用js接口进行调用

H5 里程表、轮盘、数字滚动效果，使用js接口进行调用

最近公司项目中有个数字滚动效果，我首先想到的是从网上找个大神写好的，直接用现成的来完成需求，我发现大神们写好的效果都做的挺漂亮，只是在使用习惯上和我的不太一样，而且要满足我们样式需求的话需要进行或多或少的改动，索性我就自己摸索的实现了一下，并封装在js 里面，使用的时候只需简单的调用接口就好了

demo地址：https://github.com/GYFlash/gScrollNumber.js

gScrollNumber.gif

使用方法：

1）准备容器

        
不循环样式
        
        

        

        
循环样式
        

2）引入.js文件

3）初始化一个对象

        /**
         * 初始化一个数字滚动对象
         * 构造函数的参数项可查看 gScrollNumber.js 里面的注释
         * (任选一个就好)
         */
        var scrollNumber0 = new gScrollNumber(".scroll-number-0", {
           width: 30, // 每个数字元素的宽
           color: "orange", // 数字元素的字体颜色
           fontSize: 40, // 数字元素的字体大小
           // autoSizeContainerWidth: true // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
        });
        var scrollNumber1 = new gScrollNumber(".scroll-number-1", {
            width: 30,
            color: "orange",
            fontSize: 40,
            // autoSizeContainerWidth: true
        });
        var scrollNumber2 = new gScrollNumber3D(".scroll-number-2", {
            width: 30,
            color: "orange",
            fontSize: 40,
            autoSizeContainerWidth: false
        });

4）跑起来~~~

        scrollNumber0.run(111);
        scrollNumber1.run(222);
        scrollNumber2.run(333);
        /* 如果你想要数字是一直都变化的，那就重复第四步的 run(); 方法就可以了 */

到了这里就完成啦，这是我的github Demo地址：https://github.com/GYFlash/gScrollNumber.js

我不要打赏，如果你喜欢的话给颗星就好啦，如果你有更好的也可以分享出来给大家看，可千万不要喷我。