45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
const elements = document.querySelectorAll('.perCent');
|
|||
|
|
|
|||
|
|
const animatePercentage = (element) => {
|
|||
|
|
// 添加可见类，触发CSS过渡效果
|
|||
|
|
element.classList.add('visible');
|
|||
|
|
|
|||
|
|
let current = 1;
|
|||
|
|
const target = parseInt(element.getAttribute('data-target'));
|
|||
|
|
|
|||
|
|
// 重置为初始值
|
|||
|
|
element.textContent = '1%';
|
|||
|
|
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
current += 1;
|
|||
|
|
element.textContent = `${current}%`;
|
|||
|
|
|
|||
|
|
if (current >= target) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
}, 30);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const observer = new IntersectionObserver((entries) => {
|
|||
|
|
entries.forEach(entry => {
|
|||
|
|
if (entry.isIntersecting) {
|
|||
|
|
animatePercentage(entry.target);
|
|||
|
|
} else {
|
|||
|
|
// 当元素离开视口时
|
|||
|
|
entry.target.classList.remove('visible');
|
|||
|
|
entry.target.textContent = '1%'; // 重置为初始值
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, {
|
|||
|
|
threshold: 0.5,
|
|||
|
|
rootMargin: '0px'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.forEach(element => {
|
|||
|
|
// 初始状态设置
|
|||
|
|
element.classList.remove('visible');
|
|||
|
|
element.textContent = '1%';
|
|||
|
|
observer.observe(element);
|
|||
|
|
});
|
|||
|
|
});
|