js、jQuery实现数字滚动效果
在JavaScript和jQuery中，可以通过定时器（setInterval或setTimeout）和DOM操作来实现数字滚动的效果。以下是一个简单的数字滚动效果的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字滚动效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="number">1234567890</div>
<script>
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
$(document).ready(function() {
$('#number').each(function() {
const $this = $(this);
animateValue($this[0], 0, parseInt($this.text()), 2000);
});
});
</script>
</body>
</html>在这个例子中，animateValue 函数负责更新DOM元素的内容，实现数字的渐变效果。jQuery的ready函数确保文档加载完成后执行回调函数，在回调中对特定的元素调用animateValue函数。这个例子中使用了requestAnimationFrame来优化动画性能。
评论已关闭