File size: 5,213 Bytes
32cde4a 02a3b13 32cde4a 02a3b13 32cde4a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | // 页面加载完成后执行
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');
}
});
}); |