JQUERY.COUNTO.JS：在滚动计数编号NOT ONLOAD

我正在使用一个网页网站，我想用它添加计数编号，所以我使用javascript.countTo.js。我创建的每个部分将相关的数据，我把部分计数器<section id="counters">我下面的部分业务<section class="justaddheight portfolio">。每次页面加载数量，当我滚动时，我总是看到数字停止或结束它的数量。现在，当我滚动并进入部分计数器<section id="counters">时，我想要数字计数。另外，我使用WOW.js和easingJS与我的网站，它是最好的，如果你把它与代码结合起来，但它也可以接受，如果没有。该代码下面以下几点：JQUERY.COUNTO.JS：在滚动计数编号NOT ONLOAD

的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>

来源

2017-04-04 Ace

如果你需要它时，映入眼帘的检测，这里有个答案http://stackoverflow.com/questions/487073/check-if-element-是可见的，后scrollinghttp：//stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – inarilo

要检查元素滚动到视图，我将使用功能从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取自此对象，并检查元素底部是否小于窗口高度。所有的

首先，结合对windowscroll事件。在处理程序内部，检查元素是否在视图中。当元素进入视图时，然后调用元素上的插件并解除对事件的绑定。

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

来源

2017-04-10 08:43:40 Tushar

您可以使用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 
});

来源

2017-04-14 02:31:03

JQUERY.COUNTO.JS：在滚动计数编号NOT ONLOAD

回答

相关问题