在我网站的页脚中,我正在使用counUp.js(链接:http://inorganik.github.io/countUp.js/)来计算三个数字。我在网站底部添加了此代码:
<script type="text/javascript">
var c1 = new countUp("upnum1", 1, 27, 0, 4);
var c2 = new countUp("upnum2", 1, 10, 0, 4);
var c3 = new countUp("upnum3", 1, 27, 0, 4);
var c4 = new countUp("upnum4", 1, 1000, 0, 4);
window.onload = function() {
c1.start();
c2.start();
c3.start();
c4.start();
}
</script>
这很好用,但是当然加载页面后开始计数。如果数字的包含div是“在视图中”而不是在加载页面时,如何设置触发此效果?尝试了几个jQuery的东西,但找不到有效的解决方案......谢谢!
答案 0 :(得分:17)
可以简单地检查元素是否在视口中。
您可以选择使用插件或纯JQuery。
<div id="inViewport">Is this in the viewport?</div>
这是小提琴: http://jsfiddle.net/zWtkc/1/
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(document).ready(function(){
$(window).scroll(function(){
if ($('#inViewport').isOnScreen()) {
// The element is visible, do something
alert("in viewport!");
} else {
// The element is NOT visible, do something else
}
});
});
您可以使用此插件:https://github.com/teamdf/jquery-visible/
$(document).ready(function(){
if ($('#inViewport').visible(true)) {
// The element is visible, do something
} else {
// The element is NOT visible, do something else
}
});
或者您可以使用此插件:http://www.appelsiini.net/projects/viewport允许视口选择器,您的代码将如下所示:
$('#inViewport:in-viewport').doSomething();
答案 1 :(得分:1)
这就是我使用此插件的方式:https://github.com/protonet/jquery.inview
var options = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
};
var c1 = new CountUp("a1", 0, 1000, 0, 5, options);
var c2 = new CountUp("a2", 0, 1000, 0, 5, options);
var c3 = new CountUp("a3", 0, 1000, 0, 5, options);
var c4 = new CountUp("a4", 0, 1000, 0, 5, options);
var c5 = new CountUp("a5", 0, 1000, 0, 5, options);
var c6 = new CountUp("a6", 0, 1000, 0, 5, options);
$('#counters').one('inview', function(event, isInView) {
c1.start();
c2.start();
c3.start();
c4.start();
c5.start();
c6.start();
});
答案 2 :(得分:0)
这是我的代码,当元素开始进入视口时运行一个函数。
来查看运行中的代码
var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
var firEvent = false,
objectPosTop = $('.go-counterTeaser').offset().top;
//when element shows at bottom
var elementViewInBottom = objectPosTop - winHeight;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
//when element position starting in viewport
if (currentPosition > elementViewInBottom && firEvent === false) {
firEvent = true;
animationCounter();
}
});
}
//counter function will animate by using external js also add seprator "."
function animationCounter(){
$('.numberBlock h2').each(function () {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator('.');
var counterValv = $(this).text();
$(this).animateNumber(
{
number: counterValv,
numberStep: comma_separator_number_step
}
);
});
}
https://jsfiddle.net/uosahmed/frLoxm34/9/