隨著頁面滾動，數字自動增大的jquery特效

首先為了截出gif圖，我下載了一個小工具

GifCam： https://www.appinn.com/gifcam/

隨著頁面滾動，數字自動增大的jquery特效

主要就是依賴這個腳本script.js

// JavaScript Document
$.fn.countTo = function (options) {
        options = options || {};
        
        return $(this).each(function () {
            // set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults, {
                from:            $(this).data('from'),
                to:              $(this).data('to'),
                speed:           $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals:        $(this).data('decimals')
            }, options);
            
            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),
                increment = (settings.to - settings.from) / loops;
            
            // references & variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};
            
            $self.data('countTo', data);
            
            // if an existing interval can be found, clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer, settings.refreshInterval);
            
            // initialize the element with the starting value
            render(value);
            
            function updateTimer() {
                value += increment;
                loopCount++;
                
                render(value);
                
                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self, value);
                }
                
                if (loopCount >= loops) {
                    // remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;
                    
                    if (typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self, value);
                    }
                }
            }
            
            function render(value) {
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
            }
        });
    };
    
    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };
    
    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }



  // custom formatting example
  $('#count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });
  
function count1(options) {
 document.getElementById('dt').style.display = "block"; //鎺у埗鐩掑瓙鏄劇ず
}
 
  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }

使用時首先在頁面引入jquery.js和script.js

給要動畫的元素添加 timer 類，data-to 表示最終到達的數字， data-speed 表示動畫速度

<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>

調用時的腳本

<script type="text/javascript">
    $('.timer').each(count) 
    $('.timer').each(count1);
</script>

接下來是完整的頁面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>

<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>

<script type="text/javascript">
    $('.timer').each(count) 
    $('.timer').each(count1);
</script>

</body>
</html>

當然我這個比較醜，找了個好看的demo 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
/*時間人數開始*/
.time{ width:100%; height:298px; float:left; background:url(images/timebg.png) no-repeat center; background-size:cover;}
.time_content{ width:1200px; height:298px; margin:0 auto;}
.time_left{ width:40%; max-width:480px; float:left; height:298px;}
.time_left h1{ width:100%; float:left; height:24px; line-height:24px; font-size:22px; text-align:center; color:#FFF; font-weight:400; margin-top:96px;}
.time_left h2{ width:100%; float:left; height:56px; line-height:56px; font-size:54px; text-align:center; color:#FFF; margin-top:12px; font-weight:bold;}

.time_right{ width:60%; max-width:720px; height:298px; float:left;}
.wrapper { width: 630px; height:90px; float:left; margin-left:100px; margin-top:110px; display:none;}
.wrapper1{ width:200px; float:left; height:90px;}
.wrapper2{ width:200px; float:left; height:90px; margin-left:20px; border-right:1px solid #FFF; border-left:1px solid #FFF;}
.wrapper3{ width:200px; float:left; height:90px;}

.counter { color:#ffe400; border-radius: 5px;}
.time1{ width:100px; height:54px; float:left;}
.time1 h1{ float:left;}
.time1 h2{ float:left;}
.time2{ width:70px; height:54px; float:left; margin-left:50px;}
.time3{ width:100px; height:54px; float:left; text-align:center;margin-left:40px;}
.timex{ width:50px; height:30px; margin-top:24px;color:#FFF; float:left;}
.timey{ width:200px; float:left; color:#FFF;}
.wrapper2 .timey{ width:148px; margin-left:52px; float:left;}
.wrapper3 .timey{ width:152px; margin-left:48px; float:left;}
.count-title { font-weight: normal; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
/*時間人數結束*/
</style>
</head>

<body>

<div class="time">
    <div class="time_content">
        <div class="time_left">
            <h1>真實數據&nbsp;放心選擇</h1>
            <h2>專註學歷教育15年</h2>
        </div>
        <div class="time_right">
            <div class="wrapper" id="dt">
            
                <div class="wrapper1">
                    <div class="counter col_fourth time1">
                      <h2 class="timer count-title" data-to="300000" data-speed="2000">300000</h2>
                    </div>
                    <div class="timex">以上</div>
                    <div class="timey">付費學員</div>
                 </div>
                 
                 <div class="wrapper2">
                    <div class="counter col_fourth time2">
                      <h2 class="timer count-title" data-to="107" data-speed="2000">107</h2>
                    </div>
                    <div class="timex">家</div>
                    <div class="timey">地區分部</div>
                 </div>
                 
                 <div class="wrapper3">
                    <div class="counter col_fourth time3">
                      <h2 class="timer count-title" data-to="1000" data-speed="2000">1000</h2>
                    </div>
                    <div class="timex">多人</div>
                    <div class="timey">教研團隊</div>
                 </div>
            </div>
            
            <script type="text/javascript">
                 $('.timer').each(count) 
                 $('.timer').each(count1);
            </script>
            
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.timer').each(count) 
    $('.timer').each(count1);
</script>

</body>
</html>

效果圖