jquery数字滚动到指定数字效果

最新推荐文章于 2024-01-29 10:23:50 发布

NAVILLERA

最新推荐文章于 2024-01-29 10:23:50 发布

阅读量575

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_43923202/article/details/105064400

版权

这是一个使用JavaScript库countup.js实现数字从startVal滚动到endVal的效果。该库支持自定义小数位数、动画时长、分隔符、小数点等选项，并提供了缓动函数和格式化数字的方法。它还包含了处理动画帧的逻辑，确保数字平滑地滚动到目标值。当动画完成或需要更新目标值时，可以调用相应的函数进行控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<script type="text/javascript" src="./jQuery数字动画特效_files/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./jQuery数字动画特效_files/countUp.min.js"></script>

	<h1 id="num1"></h1>
	<h1 id="num2"></h1>
	<h1 id="num3"></h1>

	<script type="text/javascript">
		var options = {  
			  useEasing: true, 	 	// 使用缓和
			  useGrouping: true,	// 使用分组(是否显示千位分隔符,一般为 true)
			  separator: ',',		// 分隔器(千位分隔符,默认为',')
			  decimal: '.',			// 十进制(小数点符号,默认为 '.')
			  prefix: '',			// 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
			  suffix: ''			// 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
		};
		$(function() {
			// CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
			// 参数一: 数字所在容器
			// 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
			// 参数三: 数字增长后的最终值,该值一般通过异步请求获取
			// 参数四: 数字小数点后保留的位数
			// 参数五: 数字增长特效的时间,此处为3秒
			// 参数六: 其他配置项
			// 注: 参数六也可不加,其配置项则为默认值
			
			new CountUp("num1", 0, 1380, 0, 3, options).start();
			new CountUp("num2", 0, 1380, 2, 3, options).start();
			new CountUp("num3", 0, 1380, 4, 3, options).start();
		});
	</script>

</body>

countup.js源码
var CountUp = function (target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function () {
return “1.9.2”
};
self.options = {
useEasing: true,
useGrouping: true,
separator: “,”,
decimal: “.”,
easingFn: easeOutExpo,
formattingFn: formatNumber,
prefix: “”,
suffix: “”,
numerals: []
};
if (options && typeof options === “object”) {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key]
}
}
}
if (self.options.separator === “”) {
self.options.useGrouping = false
} else {
self.options.separator = “” + self.options.separator
}
var lastTime = 0;
var vendors = [“webkit”, “moz”, “ms”, “o”];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + “RequestAnimationFrame”];
window.cancelAnimationFrame = window[vendors[x] + “CancelAnimationFrame”] || window[vendors[x] + “CancelRequestAnimationFrame”]
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall)
}, timeToCall);
lastTime = currTime + timeToCall;
return id
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id)
}
}