// 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 初始化AOS动画库 AOS.init({ duration: 800, easing: 'ease-in-out', once: true, offset: 100 }); // 页面加载动画 setTimeout(function() { const loader = document.querySelector('.page-loader'); if (loader) { loader.classList.add('hidden'); // 动画完成后移除元素 setTimeout(function() { loader.style.display = 'none'; }, 500); } }, 1500); // 创建滚动进度条 createScrollProgress(); // 创建返回顶部按钮 createBackToTopButton(); // 添加滚动事件监听 window.addEventListener('scroll', handleScroll); // 初始化页面交互 initPageInteractions(); // 初始化表单处理 initForms(); }); // 创建滚动进度条 function createScrollProgress() { const progressBar = document.createElement('div'); progressBar.className = 'scroll-progress'; document.body.appendChild(progressBar); } // 创建返回顶部按钮 function createBackToTopButton() { const backToTopBtn = document.createElement('div'); backToTopBtn.className = 'back-to-top'; backToTopBtn.innerHTML = ''; backToTopBtn.setAttribute('aria-label', '返回顶部'); backToTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); document.body.appendChild(backToTopBtn); } // 处理滚动事件 function handleScroll() { updateScrollProgress(); toggleBackToTopButton(); } // 更新滚动进度条 function updateScrollProgress() { const progressBar = document.querySelector('.scroll-progress'); if (progressBar) { const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight - windowHeight; const scrolled = (window.scrollY / documentHeight) * 100; progressBar.style.width = scrolled + '%'; } } // 显示/隐藏返回顶部按钮 function toggleBackToTopButton() { const backToTopBtn = document.querySelector('.back-to-top'); if (backToTopBtn) { if (window.scrollY > 300) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } } } // 初始化页面交互 function initPageInteractions() { // 导航菜单点击效果 initNavigation(); // 功能卡片悬停效果 initFeatureCards(); // 用户评价卡片交互 initTestimonialCards(); // 行动号召按钮点击效果 initCallToAction(); } // 导航菜单交互 function initNavigation() { const navLinks = document.querySelectorAll('.navbar-nav .nav-link'); navLinks.forEach(link => { link.addEventListener('click', function(e) { // 移除所有active类 navLinks.forEach(l => l.classList.remove('active')); // 添加当前active类 this.classList.add('active'); // 如果是锚点链接,平滑滚动 const href = this.getAttribute('href'); if (href && href.startsWith('#')) { e.preventDefault(); const target = document.querySelector(href); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } }); }); } // 功能卡片交互 function initFeatureCards() { const featureCards = document.querySelectorAll('.feature-box'); featureCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px)'; this.style.boxShadow = '0 15px 30px rgba(0,0,0,0.15)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)'; }); }); } // 用户评价卡片交互 function initTestimonialCards() { const testimonialCards = document.querySelectorAll('.testimonial-card'); testimonialCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)'; }); }); } // 行动号召按钮交互 function initCallToAction() { const ctaButtons = document.querySelectorAll('.cta-section .btn, .hero-section .btn'); ctaButtons.forEach(btn => { btn.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05)'; this.style.boxShadow = '0 8px 25px rgba(0,0,0,0.2)'; }); btn.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; this.style.boxShadow = 'none'; }); btn.addEventListener('click', function(e) { // 添加点击效果 this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 150); // 如果是演示按钮,阻止默认行为 if (this.getAttribute('href') === '#') { e.preventDefault(); alert('欢迎体验结伴客平台!此功能正在开发中,敬请期待。'); } }); }); } // 表单处理功能 function initForms() { const forms = document.querySelectorAll('form'); forms.forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); // 表单验证 if (this.checkValidity()) { // 显示提交成功消息 showFormSuccess(this); // 重置表单 this.reset(); } else { // 显示验证错误 this.reportValidity(); } }); }); } // 显示表单提交成功消息 function showFormSuccess(form) { // 创建成功消息 const successMessage = document.createElement('div'); successMessage.className = 'alert alert-success alert-dismissible fade show'; successMessage.innerHTML = ` 提交成功!我们会尽快与您联系。 `; // 插入到表单前面 form.parentNode.insertBefore(successMessage, form); // 5秒后自动消失 setTimeout(() => { if (successMessage.parentNode) { successMessage.remove(); } }, 5000); } // 页面性能优化:图片懒加载 function initLazyLoading() { if ('IntersectionObserver' in window) { const lazyImages = document.querySelectorAll('img[data-src]'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.getAttribute('data-src'); img.removeAttribute('data-src'); imageObserver.unobserve(img); } }); }); lazyImages.forEach(img => { imageObserver.observe(img); }); } } // 页面可见性变化处理 document.addEventListener('visibilitychange', function() { if (document.hidden) { console.log('页面被隐藏'); } else { console.log('页面恢复显示'); } }); // 错误处理 window.addEventListener('error', function(e) { console.error('页面错误:', e.error); }); // 页面卸载前清理 window.addEventListener('beforeunload', function() { // 清理操作 });