繁体   English   中英

当有人滚动到 ID 时,开始编号计数器 JQuery animation

[英]Start number counter JQuery animation when someone scrolls to ID

当您滚动到特定的父 ID(如#counter-container)时,有谁知道如何启动数字计数器 animation

HTML:

<div id="counter-container">
<span class="count">6,000</span>
<span class="count">600</span>
<span class="count">60</span>
</div>

JQuery:

$(window).scroll(startCounter);
function startCounter() {
    if ($(window).scrollTop() > 200) {
        $(window).off("scroll", startCounter);
        $('.count').each(function () {
          var $this = $(this);
          jQuery({ Counter: 0 }).animate({ Counter: $this.text().replace(/,/g, '') }, {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $this.text(commaSeparateNumber(Math.floor(this.Counter)));
              },
              complete: function() {
                $this.text(commaSeparateNumber(this.Counter));
                //alert('finished');
              }
          });
        });
        function commaSeparateNumber(val) {
          while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
          }
          return val;
        }
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM