Question

到目前为止，我已经创建了 1.当一行中有元素滑入时 2.计数最多的计数器。

我想改进2号，以便计数器只在视野中开始，并且它们不会立即全部熄灭但是首先在左侧开始然后当它完成下一个计数器时熄灭所以上。

有人可以帮帮我吗？

这是我使用相同代码创建的jsfiddle： https://jsfiddle.net/DTcHh/32842/

        //window and animation items
        var animation_elements = $.find('.animation-element');
        var web_window = $(window);

        //check to see if any animation containers are currently in view
        function check_if_in_view() {
        //get current window information
        var window_height = web_window.height();
        var window_top_position = web_window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);

        //iterate through elements to see if its in view
        $.each(animation_elements, function() {

          //get the element information
          var element = $(this);
          var element_height = $(element).outerHeight();
          var element_top_position = $(element).offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
          if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
            element.addClass('in-view');
          } else {
            element.removeClass('in-view');
          }
        });

        }

        //on or scroll, detect elements in view
        $(window).on('scroll resize', function() {
          check_if_in_view()
        })
        //trigger our scroll event on initial load
        $(window).trigger('scroll');



        //Counter
        $('.counter').each(function() {
          var $this = $(this),
              countTo = $this.attr('data-count');

          $({ countNum: $this.text()}).animate({
            countNum: countTo
          },

          {
            duration: 8000,
            easing:'linear',
            step: function() {
              $this.text(Math.floor(this.countNum));
            },
            complete: function() {
              $this.text(this.countNum);
              //alert('finished');
            }
          });  
        });
    });

Answer 1

您可以通过从此链接下载

来反击js

https://www.npmjs.com/package/jquery.counterup

你只需要包含在js下面

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

和计数器范围

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

然后反击js

$('.counter').counterUp();

希望这能帮到你

JS计算当时的第一个

1 个答案: