作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
如果我向上滚动到数字,如何重新开始计数?我有一个计数。我再向下滚动页面,然后再次返回页面。我想再次从零开始计数,这可能吗?
function count($this) {
var current = parseInt($this.html(), 10);
current = current + 1;
$this.html(++current);
if (current > $this.data('count')) {
$this.html($this.data('count'));
} else {
setTimeout(function() {
count($this)
}, 1);
}
}
$(".stat-count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
#counter {
margin-bottom: 90%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="statscounts" id="counter">
<div class="statwrap">
<span class="stat-count ">400</span>
<small>number 1</small>
</div>
<div class="statwrap">
<span class="stat-count">105</span>
<small>number 2</small>
</div>
<div class="statwrap">
<span class="stat-count">321</span>
<small>number 3</small>
</div>
</div>
最佳答案
您可以使用 jQuery 检测滚动位置。一旦到达零位置,您将重新运行允许计数器的脚本。滚动到零位置后,最好将 each 放在一个函数中,方法是调用它。
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll == 0)
setTimeout(function(){reInitCount();},500);
});
function reInitCount(){
$(".stat-count").each(function() {
$(this).html('0');
count($(this));
});
}
function reInitCount(){
$(".stat-count").each(function() {
$(this).html('0');
count($(this));
});
}
function count($this) {
var current = parseInt($this.html(), 10);
current = current + 1;
$this.html(++current);
if (current > $this.data('count')) {
$this.html($this.data('count'));
} else {
setTimeout(function() {
count($this)
}, 1);
}
}
reInitCount();
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll == 0)
setTimeout(function(){reInitCount();},500);
});
#counter {
margin-bottom: 90%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="statscounts" id="counter">
<div class="statwrap">
<!-- it's better to initialize your data-count on the HTML side -->
<span class="stat-count" data-count="400">0</span>
<small>number 1</small>
</div>
<div class="statwrap">
<span class="stat-count" data-count="105">0</span>
<small>number 2</small>
</div>
<div class="statwrap">
<span class="stat-count" data-count="321">0</span>
<small>number 3</small>
</div>
</div>
<p>
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
</p>
关于javascript - 计算卷轴上的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50983535/
好吧,我有这个静态的导航菜单,但我想让它在用户向下或向上滚动他的页面时流畅地流动...请帮助编写代码,因为我已经尝试过做一些事情,但一切都变坏了。 代码:
我有两个 ionic 滚动标签。在每个 ion-scroll 标签中都有一个列表。这些列表中的每一个都以 10 个项目开始,当用户到达特定 ionic 卷轴的底部时,它应该加载更多。我面临的问题是这无
我的 ionic 应用程序中有一个看起来像这样的模板: {{ monthName }} ... 类为“nav”的
我拼命地试图将目标 div 保持在 float 菜单栏下方。正确的做法是什么? $(document).ready(function () { $('a[href^="#"]').on('cl
我在 silverstripe 网站上运行了无限的 ajax 滚动。我还运行了“NoneLeft”扩展,让人们知道,他们到达了底部。 IAScroll 在 ArticleHolder 页面中显示 Ar
我是一名优秀的程序员,十分优秀!