283 lines
8.8 KiB
JavaScript
283 lines
8.8 KiB
JavaScript
// 滚动动画
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// 观察所有车型区域
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const carSections = document.querySelectorAll('.car-section');
|
|
carSections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// 平滑滚动到锚点
|
|
const navLinks = document.querySelectorAll('.nav-menu a[href^="#"]');
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const targetId = link.getAttribute('href');
|
|
const targetSection = document.querySelector(targetId);
|
|
|
|
if (targetSection) {
|
|
const offsetTop = targetSection.offsetTop - 80; // 考虑导航栏高度
|
|
window.scrollTo({
|
|
top: offsetTop,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 导航栏滚动效果
|
|
const navbar = document.querySelector('.navbar');
|
|
let lastScrollTop = 0;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
if (scrollTop > lastScrollTop && scrollTop > 100) {
|
|
navbar.style.transform = 'translateY(-100%)';
|
|
} else {
|
|
navbar.style.transform = 'translateY(0)';
|
|
}
|
|
|
|
// 添加背景透明度变化
|
|
if (scrollTop > 50) {
|
|
navbar.style.background = 'rgba(10, 10, 10, 0.98)';
|
|
} else {
|
|
navbar.style.background = 'rgba(10, 10, 10, 0.95)';
|
|
}
|
|
|
|
lastScrollTop = scrollTop;
|
|
});
|
|
|
|
// 数字动画效果
|
|
const animateNumbers = () => {
|
|
const numbers = document.querySelectorAll('.stat-number');
|
|
|
|
numbers.forEach(number => {
|
|
const finalValue = number.textContent;
|
|
const numericValue = parseInt(finalValue.replace(/[^\\d]/g, ''));
|
|
const suffix = finalValue.replace(/[\\d]/g, '');
|
|
|
|
if (numericValue > 0) {
|
|
let currentValue = 0;
|
|
const increment = numericValue / 50;
|
|
const timer = setInterval(() => {
|
|
currentValue += increment;
|
|
if (currentValue >= numericValue) {
|
|
currentValue = numericValue;
|
|
clearInterval(timer);
|
|
}
|
|
number.textContent = Math.floor(currentValue) + suffix;
|
|
}, 30);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 当英雄区域进入视口时触发数字动画
|
|
const heroObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
animateNumbers();
|
|
heroObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
const heroSection = document.querySelector('.hero');
|
|
if (heroSection) {
|
|
heroObserver.observe(heroSection);
|
|
}
|
|
|
|
// 车型卡片悬停效果增强
|
|
const carImages = document.querySelectorAll('.car-image img');
|
|
carImages.forEach(img => {
|
|
img.addEventListener('mouseenter', () => {
|
|
img.style.filter = 'brightness(1.1) contrast(1.1)';
|
|
});
|
|
|
|
img.addEventListener('mouseleave', () => {
|
|
img.style.filter = 'brightness(1) contrast(1)';
|
|
});
|
|
});
|
|
|
|
// 特性标签点击效果
|
|
const featureTags = document.querySelectorAll('.feature-tag');
|
|
featureTags.forEach(tag => {
|
|
tag.addEventListener('click', () => {
|
|
// 添加点击动画
|
|
tag.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
tag.style.transform = 'scale(1)';
|
|
}, 150);
|
|
|
|
// 可以在这里添加更多交互，比如显示详细信息
|
|
console.log(`点击了特性: ${tag.textContent}`);
|
|
});
|
|
});
|
|
|
|
// CTA按钮点击效果
|
|
const ctaButton = document.querySelector('.cta-button');
|
|
if (ctaButton) {
|
|
ctaButton.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
// 添加点击动画
|
|
ctaButton.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
ctaButton.style.transform = 'scale(1)';
|
|
}, 150);
|
|
|
|
// 模拟预约功能
|
|
alert('感谢您的关注！我们的销售顾问将尽快与您联系，为您安排试驾体验。');
|
|
});
|
|
}
|
|
|
|
// 响应式菜单切换（移动端）
|
|
const createMobileMenu = () => {
|
|
const navContainer = document.querySelector('.nav-container');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
// 创建移动端菜单按钮
|
|
const menuButton = document.createElement('button');
|
|
menuButton.className = 'mobile-menu-button';
|
|
menuButton.innerHTML = '☰';
|
|
menuButton.style.cssText = `
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent-gold);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
`;
|
|
|
|
navContainer.appendChild(menuButton);
|
|
|
|
// 移动端菜单切换
|
|
menuButton.addEventListener('click', () => {
|
|
navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
|
|
navMenu.style.cssText = `
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--primary-black);
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
`;
|
|
});
|
|
|
|
// 响应式显示控制
|
|
const handleResize = () => {
|
|
if (window.innerWidth <= 768) {
|
|
menuButton.style.display = 'block';
|
|
navMenu.style.display = 'none';
|
|
} else {
|
|
menuButton.style.display = 'none';
|
|
navMenu.style.display = 'flex';
|
|
navMenu.style.cssText = '';
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
handleResize(); // 初始调用
|
|
};
|
|
|
|
createMobileMenu();
|
|
|
|
// 懒加载图片
|
|
const lazyImages = document.querySelectorAll('img');
|
|
const imageObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.style.opacity = '0';
|
|
img.style.transition = 'opacity 0.5s ease-in-out';
|
|
|
|
// 模拟图片加载
|
|
setTimeout(() => {
|
|
img.style.opacity = '1';
|
|
}, 100);
|
|
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
lazyImages.forEach(img => {
|
|
imageObserver.observe(img);
|
|
});
|
|
|
|
// 添加页面加载完成后的入场动画
|
|
document.body.style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.body.style.transition = 'opacity 0.5s ease-in-out';
|
|
document.body.style.opacity = '1';
|
|
}, 100);
|
|
|
|
// 键盘导航支持
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Tab') {
|
|
// 确保焦点可见
|
|
document.body.classList.add('keyboard-navigation');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mousedown', () => {
|
|
document.body.classList.remove('keyboard-navigation');
|
|
});
|
|
|
|
// 添加键盘导航样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.keyboard-navigation *:focus {
|
|
outline: 2px solid var(--accent-gold) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
|
|
// 性能优化：防抖函数
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// 优化滚动性能
|
|
const optimizedScroll = debounce(() => {
|
|
// 滚动相关的优化操作
|
|
console.log('滚动事件已优化');
|
|
}, 16); // 约60fps
|
|
|
|
window.addEventListener('scroll', optimizedScroll);
|
|
|
|
// 错误处理
|
|
window.addEventListener('error', (e) => {
|
|
console.error('页面错误:', e.error);
|
|
});
|
|
|
|
// Promise错误处理
|
|
window.addEventListener('unhandledrejection', (e) => {
|
|
console.error('未处理的Promise错误:', e.reason);
|
|
});
|