时间戳

首页 > 解决方案 > 使视图中的动画功能更加灵活

javascript - 使视图中的动画功能更加灵活

问题描述

当滚动到视图中时，我有一些代码可以为几个数字设置动画。一切正常。但是，目前它仅适用于一组数字并绑定到一个 div（带有 id）。我想让它变得更加灵活，使其适用于超过 1 组数字。DIV id 可以是 counter1、counter2、counter3 等。

var a = 0;
$(window).scroll(function() {
var oTop = $('#counter1').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
...

这是笔： https ://codepen.io/anon/pen/bQWpjJ

谢谢你的帮助！

标签： javascriptjquery

解决方案

也许您可以通过首先使用迭代每个计数器来修改您的实现$('#counter1, #counter2').each( .. )。

在每次迭代中，您可以通过window.scroll()为该计数器实例设置处理程序来有效地重用现有代码。

您还将var a = 0在迭代内部移动，以便您的代码跟踪此计数器实例的唯一滚动偏移量。

最后，您要确保'.counter-value'为迭代的当前counter实例选择元素：

$('#counter1, #counter2').each(function() {
  
  var a = 0;
  var counter = $(this);
  
  $(window).scroll(function() {

    var oTop = counter.offset().top - window.innerHeight;
    
    if (a == 0 && $(window).scrollTop() > oTop) {
    
      $('.counter-value', counter).each(function() {
        var $this = $(this),
          countTo = $this.attr('data-count');
        $({
          countNum: $this.text()
        }).animate({
            countNum: countTo
          },

          {

            duration: 2000,
            easing: 'swing',
            step: function() {
              $this.text(Math.floor(this.countNum));
            },
            complete: function() {
              $this.text(this.countNum); 
            }

          });
      });
      
      a = 1;
    }

  });

})
.spacing {
  width:100%;
  height: 1280px;
  position:relative;
}
.counter {text-align:center}
.counter-value {display:inline-block; padding:20px 40px; margin:0 20px; border:1px solid #ddd; font-family:Arial; font-size:50px; font-weight:bold}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="spacing"></div>
<div id="counter1">
    <div class="counter-value" data-count="300">0</div>
    <div class="counter-value" data-count="400">100</div>
    <div class="counter-value" data-count="1500">200</div>
</div>
<div class="spacing"></div>

<div id="counter2">
    <div class="counter-value" data-count="500">100</div>
    <div class="counter-value" data-count="600">200</div>
    <div class="counter-value" data-count="1700">300</div>
</div>
<div class="spacing"></div>

这是一个有效的代码笔-希望对您有所帮助！

推荐阅读