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

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

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

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

gScrollNumber.gif

使用方法：

1）准备容器

        <h2>不循环样式</h2>
        <!-- 任意一个非行内元素就可以当做容器，绑定id 或 class ,必须设置容器的高度 height,因为每个数字的高度是由容器的高度决定所以容器的高度必须要设置的 -->
        <div class="scroll-number-0"></div>
        <div class="scroll-number-1"></div>
        <h2>循环样式</h2>
        <div class="scroll-number-2"></div>

2）引入.js文件

    <!-- 使用jQuery -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- 二选一 -->
    <!-- 普通样式 字符上下滚动 -->
    <script type="text/javascript" src="gScrollNumber.js"></script>

    <!-- 循环样式 字符全程往上滚动 -->
    <script type="text/javascript" src="gScrollNumber-3d.js"></script>

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

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