我正在使用一个页面网站,我想用它添加一个计数数字,所以我使用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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
