个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我写这个是为了在到达 #counter 时启动计数功能。当我滚动到 #counter 时，数字会像预期的那样从 1 变为 600。问题是它又回到了 1。我只想保持在 600。
$(window).scroll(function() {
var hT = $('#counter').offset().top,
hH = $('#counter').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
});.box {
height: 900px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div id="counter">
<div><span class="count">600</span></div>
</div>最佳答案
一旦该值达到 600，您就可以使用 .stop() jQuery 方法停止动画。
$(window).scroll(function() {
var hT = $('#counter').offset().top,
hH = $('#counter').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)) {
$('.count').each(function (index, value) {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
if(Math.ceil(now) === 600){
$(this).stop(true, true);
}
}
});
});
}
});#counter{
margin-top: 100vh;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Counter</title>
</head>
<body>
<p>scroll to view the counter</p>
<div id="counter">
<div><span class="count">600</span></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>这是上面代码片段的 jsbin https://jsbin.com/dejeji/edit?html,js,output
关于javascript - jQuery 计数函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47718445/
24
4
0
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
我有点卡在 JavaScript 逻辑上来完成这个任务。 基本上 如果我给出一个数字(比如 30) 我想在两边都显示 5。 所以 25 26 27 28 29 30 31 32 33 34 35 这部
我编写的程序有问题。我无法获得输入字符串的正确字数，但我获得了正确的最长字符数。我不知道为什么，但这是我的代码。我正在做的是将一个字符串传递给一个函数，该函数将字符串中的所有字母大写。然后，该函数逐个
我有功能 public ArrayList vyberNahodnaPismena() { String[] seznamPismen = {"A", "Á", "B", "C", "Č",
这可以在 PGSQL 中完成吗？我有一个我创建的 View ，其中主机名、ip 和数据中心来自一个表，ifdesc 和 if stats 来自另一个表。 View 输出如下所示: hostname |
我想要一组来自订单文件的数据，这些数据可以为我提供客户编号、订单编号、产品、数量、价格以及每个订单的订单详细信息文件中的行数。我在最后一部分遇到问题。 Select Header.CustNo, He
我有属于街道的房子。一个用户可以买几套房子。我如何知道用户是否拥有整条街道？ street table with columns (id/name) house table with columns
我有一套有 200 万个主题标签。然而，只有大约 200k 是不同的值。我想知道哪些主题标签在我的数据中重复得更多。 我用它来查找每个主题标签在我的数据集上重复了多少次: db.hashtags.ag
我有如下文件: { "_id" : "someuniqueeventid", "event" : "event_type_1", "date" : ISODate("2014-
我有以下三个相互关联的表: 主持人(有多个 session ) session (有多个进程) 过程 表结构如下: 主机表 - id, name session 表 - id, host_id, na
我需要根据 2 个字段对行进行计数以进行分组。 动物(一) id group_id strain_id death_date death_cause status --
我有一个 LINQ 语句，我正在努力改正，所以可能这一切都错了。我的目标是查询一个表并加入另一个表以获取计数。 地点 标识、显示 ProfilePlaces ID、PlaceID、通话、聆听 基本上P
我无法编写 Countifs 来完成我想要的。我每个月都会运行一份 claim 报告，其中包含大量按列组织的数据，并每月将其导出到 Excel 中。在一个单独的选项卡上，我有引用此数据复制到的选项卡的
我有一些数据采用此 sqlfilddle 中描述的格式:http://sqlfiddle.com/#!4/b9cdf/2 基本上，一个包含用户 ID 和事件发生时间的表。我想做的是根据用户发生事件的时
我有以下 SQL 语句: SELECT [l.LeagueId] AS LeagueId, [l.LeagueName] AS NAME, [lp.PositionId] FROM
我试图找出一个值在列中出现的平均次数，根据另一列对其进行分组，然后对其进行计算。 我有 3 张 table ，有点像这样 DVD ID | NAME 1 | 1 2 | 1 3
我有一个非常简单的 SQL 问题。我有一个包含以下列的数据库表: 零件号 销售类型(为简单起见，称之为销售类型 1、2、3、4、5) 我希望编写一个包含以下三列的查询: 零件号 Sales Type
我创建了以下存储过程，用于计算选定位置的特定范围之间每天的记录数: [dbo].[getRecordsCount] @LOCATION as INT, @BEGIN as datetime, @END
我有一个包含一组列的表，其中一个是日期列。 我需要计算该列的值引用同一个月的次数。如果一个月内，该计数的总和超过 3，则返回。 例如: ____________________ | DATE |
看XXX数据如下: lala XXX = EL String [XXX] | TXT String | MMS String 为此，XXX数据yppz是由 lala
我是一名优秀的程序员,十分优秀！