JQUERY.COUNTO.JS：关于滚动计数而非OnLoad

时间：2017-04-04 09:03:57

标签： javascript jquery html css twitter-bootstrap-3

我正在使用一个页面网站，我想用它添加一个计数数字，所以我使用javascript.countTo.js。我创建了每个部分以对相关数据进行分组，然后将部分计数器 <section id="counters"> 放在我的投资组合部分 <section class="justaddheight portfolio"> 下面。每次页面加载数字计数，当我滚动时，我总是看到数字停止或结束它正在计数。现在，当我滚动并进入部分计数器 <section id="counters"> 时，我想要数字计数。另外，我在我的网站上使用了WOW.js和easingJS，如果你将代码与它结合使用是最好的，但如果没有，它也是可以接受的。代码如下：

的index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
        <meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->

        <!--///////////////////////////////////////////////////////
                            CSS 
        ///////////////////////////////////////////////////////-->
        <link rel="stylesheet" href="css/animate.min.css">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Font-Awesome -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Icomoon-->
        <link rel="stylesheet" href="css/icomoon.css">
        <!-- Simple Line Icons -->
        <link rel="stylesheet" href="css/simple-line-icons.css">     
        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


        <!--///////////////////////////////////////////////////////
                            JAVASCRIPT 
        ///////////////////////////////////////////////////////-->

        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Wow -->
        <script src="js/wow.min.js"></script>
        <!-- Counter -->
        <script src="js/jquery.countTo.js"></script>
        <!--Easing-->
        <script src="js/jquery.easing.1.3.js"></script>        
        <!--Custom JS-->
        <script src="js/custom.js"></script>
    </head>
    <body id="top">
        <section class="justaddheight text-center about" >
            <h1>SCROLL DOWN</h1>
            <p>First, Scroll Now</p>
            <p>Second, try Again but wait for few seconds before scroll to identify.</p>
        </section>
         <section class="justaddheight service">

        </section>
         <section class="justaddheight portfolio">

        </section>
        <section id="counters">
            <div class="ace-overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="50">89</span>
                            <span class="ace-counter-label">Finished projects</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-code to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
                            <span class="ace-counter-label">Templates</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-cup to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
                            <span class="ace-counter-label">Cup of coffees</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-people to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
                            <span class="ace-counter-label">Happy clients</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

<style type="text/css">
    /* USE JUST TO ADJUST HEIGHT*/
    .justaddheight{
        height: 500px;
    }
    .text-center{
        text-align: center;
    }
</style>
<script type="text/javascript">
    $('.counter-number').countTo();
</script>

2 个答案:

答案 0 :(得分：6)

要检查元素是否滚动到视图中，我将使用this answer中的函数。

现在，我们可以使用以下函数

检查元素#counters是否在视图中 
function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

首先使用getBoundingClientRect()获取边界点。这将返回调用该方法的元素的top，left，bottom，right，width和height。这些可用于检测元素是否在视图内。 top和bottom取自此对象，并检查元素底部是否小于窗口高度。

首先，在scroll上绑定window事件。在处理程序内部，检查元素是否在视图中。当元素进入视图时，然后调用元素上的插件并取消绑定scroll事件。

＆＃13;
＆＃13; 
function isScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo();

    // Unbind scroll event
    $(window).off('scroll');
  }
});
＆＃13; 
.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<section class="justaddheight text-center about">
  <h1>SCROLL DOWN</h1>
  <p>First, Scroll Now</p>
  <p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">

</section>
<section class="justaddheight portfolio">

</section>
<section id="counters">
  <div class="ace-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
          <span class="ace-counter-label">Finished projects</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-code to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
          <span class="ace-counter-label">Templates</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-cup to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
          <span class="ace-counter-label">Cup of coffees</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-people to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
          <span class="ace-counter-label">Happy clients</span>
        </div>
      </div>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

JsFiddle Demo

答案 1 :(得分：1)

您可以使用appear.js插件，该插件会在元素出现，消失并重新出现在视口中时为元素提供事件触发器。

<span class='count'>50</span>

和JS 

appear({
  init: function init() {},
  elements: function elements() {
    // Track all elements with the class "count"
    return document.getElementsByClassName('count');
  },
  appear: function appear(el) {
    $(el).countTo({
      from: 0,
      to: $(el).html(),
      speed: 1300,
      refreshInterval: 60
    });
  },
  disappear: function disappear(el) {},
  bounds: 200,
  reappear: true
});
相关问题
最新问题