數字滾動特效 NumScroll

1.使用前先引入jquery
2.前端學習羣:814798690

下載地址

https://github.com/chaorenzeng/jquery.numscroll.js.git

快速使用  

1.引入 jquery 和 jquery.numscroll.js 

1 2	<script src= 'http://code.jquery.com/jquery-2.1.1.min.js'  type= 'text/javascript' ></script> <script src= "js/jquery.numscroll.js"  type= "text/javascript"  charset= "utf-8" ></script>

2.拷貝如下佈局結構

1	< span  class="num">888888</ span >

3.建立numscroll對象:

1	$( ".num" ).numScroll();

API文檔

可選參數	默認值	說明
time	1500	滾動總時長
delay	0	延遲啓動時長

案例展現

插件源碼：

/*!
 * jquery.numscroll.js -- 數字滾動累加動畫插件  (Digital rolling cumulative animation)
 * version 1.0.0
 * 2018-09-22
 * author: KevinTseng < 921435247@qq.com@qq.com >
 * 文檔:  https://github.com/chaorenzeng/jquery.numscroll.js.git
 * QQ交流羣: 739574382
 */

(function($) {
    
    function isInt(num) {
        //做用:是否爲整數
        //返回:true是 false否
        var res = false;
        try {
            if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
                res = parseInt(num) % 1 === 0 ? true : false;
            }
        } catch(e) {
            res = false;
        }
        return res;
    }

    function isFloat(num) {
        //做用:是否爲小數
        //返回:小數位數(-1不是小數)
        var res = -1;
        try {
            if(String(num).indexOf(".") != -1) {
                var index = String(num).indexOf(".") + 1; //獲取小數點的位置
                var count = String(num).length - index; //獲取小數點後的個數
                if(index > 0) {
                    res = count;
                }
            }
        } catch(e) {
            res = -1;
        }
        return res;
    }

    $.fn.numScroll = function(options) {
        
        var settings = $.extend({
            'time': 1500,
            'delay': 0
        }, options);
        
        return this.each(function() {
            var $this = $(this);
            var $settings = settings;
            
            var num = $this.attr("data-num") || $this.text(); //實際值
            var temp = 0; //初始值
            $this.text(temp);
            var numIsInt = isInt(num);
            var numIsFloat = isFloat(num);
            var step = (num / $settings.time) * 10; //步長
            
            setTimeout(function() {
                var numScroll = setInterval(function() {
                    if(numIsInt) {
                        $this.text(Math.floor(temp));
                    } else if(numIsFloat != -1) {
                        $this.text(temp.toFixed(numIsFloat));
                    } else {
                        $this.text(num);
                        clearInterval(numScroll);
                        return;
                    }
                    temp += step;
                    if(temp > num) {
                        $this.text(num);
                        clearInterval(numScroll);
                    }
                }, 1);
            }, $settings.delay);
            
        });
    };

})(jQuery);

實例源碼：

## NumScroll
#### 數字滾動累加動畫插件 
1.使用前先引入jquery  
2.前端學習羣:814798690
#### 快速使用
1.引入jquery和jquery.numscroll.js
```js
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
```
2.拷貝如下佈局結構
```html
<!--默認寫法-->
<span class="num">888888</span>
<!--推薦寫法-->
<span class="num" data-num="888888"></span>
```
3.建立numscroll對象:
```js
$(".num").numScroll();
```
#### API文檔
可選參數  |  默認值 | 說明
--        |    --   | --
time      |   1500  | 滾動總時長
delay     |   0     | 延遲啓動時長

#### 案例展現
![查看演示](https://github.com/chaorenzeng/jquery.numscroll.js/blob/master/index.gif)

 備註：原文地址https://www.cnblogs.com/KevinTseng/p/9690139.html