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);
|
||
});
|
||
}); |