引导计数器开始显示 [英] Bootstrap counter start on display

问题描述

因此，我找到了这个Codepen教程，该教程可以帮助我在页面上获取数字计数器.它可以正常工作，但是在页脚中找到了计数器，并且计数器实际上是在页面加载时开始的.因此，当您到达页面底部时，计数器动画已经发生.我将如何更改此JavaScript，以使计数器在我达到上述目标div或counter div之前不会启动.例如，假设我有

So I found this codepen tutorial that helped me get number counters on my page. It works perfectly however the counter is found down in the footer and the counter actually starts on page load. So by the time you get to the bottom of the page, the counter animation has already taken place. How would i alter this javascript so the counter doesn't start till I hit the above target div or counter div. For example lets say I have

<div id="services">
    //Stuff Here
</div>

<div class="counter-wrap">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="800" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="950" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
        </div>
    </div>
</div>

因此，计数器动画应开始播放，直到我点击服务" ID. JS:

So the counter animation should start till i hit the "services" id. JS:

(function ($) {
    $.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);
    }
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);  

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

代码笔示例: http://codepen.io/syedrafeeq/pen/rcfsJ

推荐答案

您可以使用以下方法检查元素在视口中是否可见:

You could check if element is visible in viewport with this:

$.fn.isOnScreen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

然后像这样滚动启动计时器:

And then start the timers on scroll like this:

$(document).on( 'scroll', function(){
  $('.timer').each(count).isOnScreen(); 
});

类似这样的内容: https://jsfiddle.net/snb7be2c/

我设置了新的<div>并添加了一些CSS，使其位于页脚中.

I set new <div> and added some css so it is in footer.

更新

仅运行动画一次: https://jsfiddle.net/_jakob/snb7be2c/1/

这篇关于引导计数器开始显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！