348 行
10 KiB
JavaScript
348 行
10 KiB
JavaScript
// Templatetwo模板主要JavaScript文件
|
||
|
||
// DOM加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 初始化所有功能
|
||
initNavbar();
|
||
initScrollAnimations();
|
||
initFloatingCards();
|
||
initSmoothScroll();
|
||
initButtonEffects();
|
||
initServiceCircle();
|
||
|
||
console.log('Templatetwo模板初始化完成');
|
||
});
|
||
|
||
// 导航栏功能
|
||
function initNavbar() {
|
||
const navbar = document.querySelector('.navbar');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
// 滚动时导航栏样式变化
|
||
window.addEventListener('scroll', throttle(function() {
|
||
if (window.scrollY > 50) {
|
||
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
|
||
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||
} else {
|
||
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
|
||
navbar.style.boxShadow = 'none';
|
||
}
|
||
}, 100));
|
||
|
||
// 导航链接点击效果
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
// 移除所有active类
|
||
navLinks.forEach(l => l.classList.remove('active'));
|
||
// 添加active类到当前链接
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
// 滚动动画
|
||
function initScrollAnimations() {
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// 观察需要动画的元素
|
||
const animatedElements = document.querySelectorAll(
|
||
'.capability-card, .problem-card, .solution-card, .section-header'
|
||
);
|
||
|
||
animatedElements.forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(30px)';
|
||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(el);
|
||
});
|
||
}
|
||
|
||
// 浮动卡片动画
|
||
function initFloatingCards() {
|
||
const floatingCards = document.querySelectorAll('.floating-card');
|
||
|
||
floatingCards.forEach((card, index) => {
|
||
// 添加鼠标悬停效果
|
||
card.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'scale(1.1) translateY(-5px)';
|
||
this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.2)';
|
||
});
|
||
|
||
card.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'scale(1) translateY(0)';
|
||
this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
|
||
});
|
||
|
||
// 随机浮动动画
|
||
setInterval(() => {
|
||
const randomY = Math.random() * 10 - 5;
|
||
const randomX = Math.random() * 10 - 5;
|
||
card.style.transform += ` translate(${randomX}px, ${randomY}px)`;
|
||
|
||
setTimeout(() => {
|
||
card.style.transform = card.style.transform.replace(
|
||
/translate\([^)]*\)/g, ''
|
||
);
|
||
}, 2000);
|
||
}, 3000 + index * 1000);
|
||
});
|
||
}
|
||
|
||
// 平滑滚动
|
||
function initSmoothScroll() {
|
||
const links = document.querySelectorAll('a[href^="#"]');
|
||
|
||
links.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
const targetElement = document.querySelector(targetId);
|
||
|
||
if (targetElement) {
|
||
const offsetTop = targetElement.offsetTop - 70; // 考虑导航栏高度
|
||
|
||
window.scrollTo({
|
||
top: offsetTop,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 按钮点击波纹效果
|
||
function initButtonEffects() {
|
||
const buttons = document.querySelectorAll('.btn');
|
||
|
||
buttons.forEach(button => {
|
||
button.addEventListener('click', function(e) {
|
||
const ripple = document.createElement('span');
|
||
const rect = this.getBoundingClientRect();
|
||
const size = Math.max(rect.width, rect.height);
|
||
const x = e.clientX - rect.left - size / 2;
|
||
const y = e.clientY - rect.top - size / 2;
|
||
|
||
ripple.style.cssText = `
|
||
position: absolute;
|
||
width: ${size}px;
|
||
height: ${size}px;
|
||
left: ${x}px;
|
||
top: ${y}px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
transform: scale(0);
|
||
animation: ripple 0.6s linear;
|
||
pointer-events: none;
|
||
`;
|
||
|
||
this.appendChild(ripple);
|
||
|
||
setTimeout(() => {
|
||
ripple.remove();
|
||
}, 600);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 服务圆圈动画
|
||
function initServiceCircle() {
|
||
const serviceItems = document.querySelectorAll('.service-item');
|
||
|
||
serviceItems.forEach((item, index) => {
|
||
// 鼠标悬停效果
|
||
item.addEventListener('mouseenter', function() {
|
||
this.style.transform += ' scale(1.1)';
|
||
this.style.zIndex = '10';
|
||
});
|
||
|
||
item.addEventListener('mouseleave', function() {
|
||
this.style.transform = this.style.transform.replace(' scale(1.1)', '');
|
||
this.style.zIndex = '1';
|
||
});
|
||
|
||
// 点击效果
|
||
item.addEventListener('click', function() {
|
||
// 移除其他项的active类
|
||
serviceItems.forEach(si => si.classList.remove('active'));
|
||
// 添加active类
|
||
this.classList.add('active');
|
||
|
||
// 显示对应的服务详情（可以扩展）
|
||
console.log(`点击了服务项: ${this.querySelector('span').textContent}`);
|
||
});
|
||
});
|
||
}
|
||
|
||
// CSS动画关键帧（通过JavaScript添加）
|
||
function addCustomStyles() {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes ripple {
|
||
to {
|
||
transform: scale(4);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.service-item.active {
|
||
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
|
||
color: white !important;
|
||
transform: scale(1.1) !important;
|
||
}
|
||
|
||
.service-item.active span {
|
||
color: white !important;
|
||
}
|
||
|
||
.floating-card {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.capability-card:hover .capability-icon {
|
||
transform: scale(1.1) rotate(5deg);
|
||
}
|
||
|
||
.problem-card:hover .problem-icon {
|
||
transform: scale(1.2);
|
||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
.solution-card:hover .solution-icon {
|
||
transform: scale(1.1);
|
||
filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3));
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
// 节流函数
|
||
function throttle(func, limit) {
|
||
let inThrottle;
|
||
return function() {
|
||
const args = arguments;
|
||
const context = this;
|
||
if (!inThrottle) {
|
||
func.apply(context, args);
|
||
inThrottle = true;
|
||
setTimeout(() => inThrottle = false, limit);
|
||
}
|
||
};
|
||
}
|
||
|
||
// 防抖函数
|
||
function debounce(func, wait, immediate) {
|
||
let timeout;
|
||
return function() {
|
||
const context = this;
|
||
const args = arguments;
|
||
const later = function() {
|
||
timeout = null;
|
||
if (!immediate) func.apply(context, args);
|
||
};
|
||
const callNow = immediate && !timeout;
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
if (callNow) func.apply(context, args);
|
||
};
|
||
}
|
||
|
||
// 响应式菜单（移动端）
|
||
function initResponsiveMenu() {
|
||
const menuToggle = document.createElement('button');
|
||
menuToggle.innerHTML = '☰';
|
||
menuToggle.className = 'menu-toggle';
|
||
menuToggle.style.cssText = `
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
`;
|
||
|
||
const navContainer = document.querySelector('.nav-container');
|
||
const navMenu = document.querySelector('.nav-menu');
|
||
|
||
navContainer.insertBefore(menuToggle, navContainer.lastElementChild);
|
||
|
||
menuToggle.addEventListener('click', function() {
|
||
navMenu.classList.toggle('mobile-open');
|
||
});
|
||
|
||
// 添加移动端样式
|
||
const mobileStyle = document.createElement('style');
|
||
mobileStyle.textContent = `
|
||
@media (max-width: 768px) {
|
||
.menu-toggle {
|
||
display: block !important;
|
||
}
|
||
|
||
.nav-menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
flex-direction: column;
|
||
padding: 1rem;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-100%);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-menu.mobile-open {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(mobileStyle);
|
||
}
|
||
|
||
// 错误处理
|
||
window.addEventListener('error', function(e) {
|
||
console.error('JavaScript错误:', e.error);
|
||
});
|
||
|
||
// 页面加载完成
|
||
window.addEventListener('load', function() {
|
||
// 添加自定义样式
|
||
addCustomStyles();
|
||
|
||
// 初始化响应式菜单
|
||
initResponsiveMenu();
|
||
|
||
// 页面加载完成提示
|
||
console.log('Templatetwo模板页面加载完成');
|
||
|
||
// 可选：显示加载完成动画
|
||
document.body.style.opacity = '1';
|
||
});
|
||
|
||
// 导出函数供外部使用
|
||
window.TemplateTwo = {
|
||
initNavbar,
|
||
initScrollAnimations,
|
||
initFloatingCards,
|
||
initSmoothScroll,
|
||
initButtonEffects,
|
||
initServiceCircle,
|
||
throttle,
|
||
debounce
|
||
}; |