// 导航栏滚动效果 window.addEventListener('scroll', () => { const header = document.querySelector('.header'); if (window.scrollY > 50) { header.style.backgroundColor = 'rgba(255, 255, 255, 0.95)'; } else { header.style.backgroundColor = '#fff'; } }); // 平滑滚动 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // 表单提交处理 const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); // 获取表单数据 const formData = new FormData(contactForm); const data = Object.fromEntries(formData); // 这里可以添加表单验证逻辑 // 模拟表单提交 alert('感谢您的留言!我们会尽快与您联系。'); contactForm.reset(); }); } // 价格方案卡片悬停效果 const pricingCards = document.querySelectorAll('.pricing-card'); pricingCards.forEach(card => { card.addEventListener('mouseenter', () => { if (!card.classList.contains('featured')) { card.style.transform = 'translateY(-10px)'; } }); card.addEventListener('mouseleave', () => { if (!card.classList.contains('featured')) { card.style.transform = 'translateY(0)'; } }); }); // 添加页面加载动画 document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('.hero-content, .feature-card, .security-content, .pricing-card'); elements.forEach((element, index) => { setTimeout(() => { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; }, index * 200); }); }); // 初始化页面元素的样式 const initElements = () => { const elements = document.querySelectorAll('.hero-content, .feature-card, .security-content, .pricing-card'); elements.forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(20px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); }; // 页面加载时初始化 initElements();