如何制作可刷新的计数器?

时间:2015-11-25 20:18:32

标签: javascript jquery

我是JS的初学者。我有动画的数字。效果很好,但我希望每次滚动页面时我的计数器都会刷新。 那么小提琴:

 if ($('#animated-counter').length) {
   $('#animated-counter .count').each(function() {
     $(this).prop('Counter', 0).animate({
       Counter: $(this).text()
     }, {
       duration: 4000,
       easing: 'swing',
       step: function(now) {
         $(this).text(Math.ceil(now));
       }
     });
   });
 }
 
.count {
  color: #fff;
  font-size: 63px;
  font-weight: bold;
  line-height: 1.2;
  display: block;
  margin-bottom: 10px;
}
.animated-number-caption {
  color: #ffffff;
  font-size: 23px;
}
.animated-number {
  background-color: rgba(25, 29, 32, .3);
  padding: 50px 0;
  text-align: center;
}
.animated-numbers-wrap {
  background: linear-gradient(to bottom, rgba(52, 168, 23, 1) 0%, rgba(46, 133, 33, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="match" style="height:500px;"></div>
<div id="animated-counter" class="animated-numbers-wrap">
  <div class="animated-numbers">
    <div class="animated-number"><span class="count">200</span>
      <h6><span class="animated-number-caption">Projects</span></h6>
    </div>
    <div class="animated-number"><span class="count">150</span>
      <h6><span class="animated-number-caption">Projects</span></h6>
    </div>
  </div>
</div>

所以我认为,有可能进行任何刷新和航点(功能(方向)和if(方向=='向下')......但我没有任何想法。请帮助我!

0 个答案:

没有答案