我有下一个脚本来计算一些统计数据,我想知道如何在滚动到达他的部分时播放它。
我们如何从脚本中看到脚本自动播放页面onload我认为。
也许我需要更改脚本,但我没有找到另一个脚本,如果你知道一些脚本,请告诉我。
(function($) {
"use strict";
function count($this){
var current = parseInt($this.html(), 10);
current = current + 1; /* Where 50 is increment */
$this.html(++current);
if(current > $this.data('count')){
$this.html($this.data('count'));
} else {
setTimeout(function(){count($this)}, 50);
}
}
$(".stat-count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
})(jQuery);
.stat {
margin:150px auto;
text-align:center;
}
.highlight {
color:#111;
padding:20px 0;
font-weight:bold;
display:block;
overflow:hidden;
margin-bottom:0;
font-size:48px;
}
.stat i {
color:#f7c221;
}
.milestone-details {
font-weight:bold;
font-size:18px;
color:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="stat">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-user fa-3x"></i>
<span class="stat-count highlight">122</span>
<div class="milestone-details">Happy Customers</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-coffee fa-3x"></i>
<span class="stat-count highlight">4226</span>
<div class="milestone-details">Ordered Coffee's</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-trophy fa-3x"></i>
<span class="stat-count highlight">14</span>
<div class="milestone-details">Awards Win</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-camera fa-3x"></i>
<span class="stat-count highlight">232</span>
<div class="milestone-details">Photos Taken</div>
</div>
</div>
</div><!-- stat -->
</div>
答案 0 :(得分:0)
使用jQuery InView插件。
$('.milestone-counter').on('inview', function(event, isInView) {
if (isInView) {
count($(this));
}
});