首页 / JQUERY / javascript – JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad

javascript – JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6881字，纯文字阅读大概需要10分钟。

内容图文

我正在使用一个页面网站,我想用它添加一个计数数字,所以我使用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>

解决方法:

要检查元素是否滚动到视图中,我将使用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()获取边界点.这将返回调用方法的元素的顶部,左侧,底部,右侧,宽度和高度.这些可用于检测元素是否在视图内.
从该对象中取出顶部和底部,并检查元素底部是否小于窗口高度.

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

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');
  }
});
.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}
<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>

JsFiddle Demo

内容总结

以上是互联网集市为您收集整理的javascript – JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad全部内容，希望文章能够帮你解决javascript – JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/805400.html

来源：【匿名】