H5 里程表、輪盤、數(shù)字滾動(dòng)效果，使用js接口進(jìn)行調(diào)用

最近公司項(xiàng)目中有個(gè)數(shù)字滾動(dòng)效果，我首先想到的是從網(wǎng)上找個(gè)大神寫(xiě)好的，直接用現(xiàn)成的來(lái)完成需求，我發(fā)現(xiàn)大神們寫(xiě)好的效果都做的挺漂亮，只是在使用習(xí)慣上和我的不太一樣，而且要滿足我們樣式需求的話需要進(jìn)行或多或少的改動(dòng)，索性我就自己摸索的實(shí)現(xiàn)了一下，并封裝在js 里面，使用的時(shí)候只需簡(jiǎn)單的調(diào)用接口就好了

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

gScrollNumber.gif

使用方法：

1）準(zhǔn)備容器

        <h2>不循環(huán)樣式</h2>
        <!-- 任意一個(gè)非行內(nèi)元素就可以當(dāng)做容器，綁定id 或 class ,必須設(shè)置容器的高度 height,因?yàn)槊總€(gè)數(shù)字的高度是由容器的高度決定所以容器的高度必須要設(shè)置的 -->
        <div class="scroll-number-0"></div>
        <div class="scroll-number-1"></div>
        <h2>循環(huán)樣式</h2>
        <div class="scroll-number-2"></div>

2）引入.js文件

    <!-- 使用jQuery -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- 二選一 -->
    <!-- 普通樣式 字符上下滾動(dòng) -->
    <script type="text/javascript" src="gScrollNumber.js"></script>

    <!-- 循環(huán)樣式 字符全程往上滾動(dòng) -->
    <script type="text/javascript" src="gScrollNumber-3d.js"></script>

3）初始化一個(gè)對(duì)象

        /**
         * 初始化一個(gè)數(shù)字滾動(dòng)對(duì)象
         * 構(gòu)造函數(shù)的參數(shù)項(xiàng)可查看 gScrollNumber.js 里面的注釋
         * (任選一個(gè)就好)
         */
        var scrollNumber0 = new gScrollNumber(".scroll-number-0", {
           width: 30, // 每個(gè)數(shù)字元素的寬
           color: "orange", // 數(shù)字元素的字體顏色
           fontSize: 40, // 數(shù)字元素的字體大小
           // autoSizeContainerWidth: true // 自動(dòng)計(jì)算容器寬度 .scroll-number-0 ，如果已經(jīng)使用css 制定了容器的寬度，此處可設(shè)置為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）跑起來(lái)~~~

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

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

我不要打賞，如果你喜歡的話給顆星就好啦，如果你有更好的也可以分享出來(lái)給大家看，可千萬(wàn)不要噴我。