132 lines
4.5 KiB
JavaScript
132 lines
4.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// 滚动动画逻辑
|
|
const animatedElements = document.querySelectorAll('.scroll-animate');
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1
|
|
});
|
|
animatedElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// 导航栏逻辑
|
|
const navbar = document.getElementById('navbar');
|
|
const menuToggle = document.getElementById('menu-toggle');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.remove('bg-white/80', 'backdrop-blur-lg', 'shadow-sm');
|
|
navbar.classList.add('bg-white', 'shadow-md');
|
|
} else {
|
|
navbar.classList.remove('bg-white', 'shadow-md');
|
|
navbar.classList.add('bg-white/80', 'backdrop-blur-lg', 'shadow-sm');
|
|
}
|
|
});
|
|
|
|
menuToggle.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
menuToggle.querySelector('i').classList.toggle('fa-bars');
|
|
menuToggle.querySelector('i').classList.toggle('fa-close');
|
|
});
|
|
|
|
// 轮播图逻辑
|
|
const slides = document.querySelectorAll('.hero-carousel-slide');
|
|
const dots = document.querySelectorAll('.hero-carousel-dot');
|
|
let currentSlide = 0;
|
|
const intervalTime = 5000;
|
|
|
|
function updateCarousel() {
|
|
slides.forEach((slide, index) => {
|
|
slide.classList.remove('opacity-100');
|
|
slide.classList.add('opacity-0');
|
|
dots[index].classList.remove('bg-white');
|
|
dots[index].classList.add('bg-white/50');
|
|
});
|
|
|
|
slides[currentSlide].classList.remove('opacity-0');
|
|
slides[currentSlide].classList.add('opacity-100');
|
|
dots[currentSlide].classList.remove('bg-white/50');
|
|
dots[currentSlide].classList.add('bg-white');
|
|
|
|
const img = slides[currentSlide].querySelector('img');
|
|
document.querySelectorAll('.hero-carousel-slide img').forEach(i => i.classList.remove('ken-burns-active'));
|
|
img.classList.add('ken-burns-active');
|
|
}
|
|
|
|
function nextSlide() {
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
updateCarousel();
|
|
}
|
|
|
|
let carouselInterval = setInterval(nextSlide, intervalTime);
|
|
updateCarousel(); // 初始化
|
|
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
clearInterval(carouselInterval);
|
|
currentSlide = index;
|
|
updateCarousel();
|
|
carouselInterval = setInterval(nextSlide, intervalTime);
|
|
});
|
|
});
|
|
|
|
// 模态框逻辑
|
|
const modal = document.getElementById('solution-modal');
|
|
const modalTitle = document.getElementById('modal-title');
|
|
const modalContent = document.getElementById('modal-content');
|
|
const modalCloseBtn = document.getElementById('modal-close-btn');
|
|
const saasCards = document.querySelectorAll('.saas-card');
|
|
|
|
saasCards.forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
const title = card.dataset.title;
|
|
const content = card.dataset.content;
|
|
|
|
modalTitle.textContent = title;
|
|
modalContent.innerHTML = content;
|
|
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('open');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
});
|
|
|
|
function closeModal() {
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
modalCloseBtn.addEventListener('click', closeModal);
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// 监听滑动，隐藏政策引导箭头
|
|
const pContainer = document.getElementById('policy-container');
|
|
const pHint = document.getElementById('policy-hint');
|
|
|
|
if (pContainer && pHint) {
|
|
pContainer.addEventListener('scroll', function() {
|
|
if (pContainer.scrollLeft > 25) {
|
|
pHint.style.opacity = '0';
|
|
setTimeout(() => {
|
|
pHint.style.display = 'none';
|
|
}, 500);
|
|
}
|
|
}, {
|
|
passive: true
|
|
});
|
|
}
|
|
}); |