// 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 移动端菜单切换 const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); // 切换菜单图标 const icon = mobileMenuButton.querySelector('i'); if (mobileMenu.classList.contains('hidden')) { icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } else { icon.classList.remove('fa-bars'); icon.classList.add('fa-times'); } }); } // 平滑滚动到锚点 const navLinks = document.querySelectorAll('a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { const targetId = this.getAttribute('href'); if (targetId === '#') return; // 只处理页面内锚点链接 if (targetId.startsWith('#')) { e.preventDefault(); const targetElement = document.querySelector(targetId); if (targetElement) { // 如果是移动端菜单,点击后关闭菜单 if (mobileMenu && !mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); const icon = mobileMenuButton.querySelector('i'); icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } } }); }); // 返回顶部按钮 const backToTopButton = document.getElementById('back-to-top'); // 监听滚动事件,显示/隐藏返回顶部按钮 window.addEventListener('scroll', function() { if (backToTopButton) { if (window.scrollY > 300) { backToTopButton.classList.remove('hidden'); } else { backToTopButton.classList.add('hidden'); } } }); // 返回顶部按钮点击事件 if (backToTopButton) { backToTopButton.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); } // 联系表单提交 const contactForm = document.getElementById('contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // 获取表单数据 const name = document.getElementById('name').value; const email = document.getElementById('email').value; const subject = document.getElementById('subject').value; const message = document.getElementById('message').value; // 简单验证 if (!name || !email || !subject || !message) { alert('请填写所有必填字段'); return; } // 这里通常应该发送数据到服务器 // 现在我们先模拟成功提交 alert(`感谢您,${name}!您的消息已成功发送。我们会尽快通过 ${email} 与您联系。`); // 重置表单 contactForm.reset(); }); } // 功能卡片动画效果 const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)'; }); card.addEventListener('mouseleave', function() { this.style.boxShadow = ''; }); }); // 动态更新年份 const yearElement = document.querySelector('footer p'); if (yearElement && yearElement.textContent.includes('2023')) { const currentYear = new Date().getFullYear(); yearElement.textContent = yearElement.textContent.replace('2023', currentYear); } // 初始化页面加载动画 setTimeout(() => { document.body.classList.add('loaded'); }, 100); }); // 添加一些额外的交互效果 window.addEventListener('load', function() { // 为导航栏添加滚动效果 const nav = document.querySelector('nav'); window.addEventListener('scroll', function() { if (window.scrollY > 50) { nav.classList.add('shadow-lg'); nav.classList.remove('nav-shadow'); } else { nav.classList.remove('shadow-lg'); nav.classList.add('nav-shadow'); } }); });