1133 lines
36 KiB
JavaScript
1133 lines
36 KiB
JavaScript
// 活牛采购智能数字化系统官网 - 主JavaScript文件
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化所有功能
|
|
initNavigation();
|
|
initScrollEffects();
|
|
initAnimations();
|
|
initContactForm();
|
|
initBackToTop();
|
|
initImageLazyLoading();
|
|
initFormValidation();
|
|
initParticleEffect();
|
|
initTypewriter();
|
|
initProgressBars();
|
|
initCountUp();
|
|
initModalEffects();
|
|
initSmoothScrolling();
|
|
initPreloader();
|
|
initCaseFiltering();
|
|
initNewsFiltering();
|
|
initPageTransitions();
|
|
enhanceCardHoverEffects();
|
|
enhanceButtonEffects();
|
|
initImageZoom();
|
|
enhanceBackToTop();
|
|
enhanceFormInteractions();
|
|
enhanceNavbar();
|
|
enhanceCarousel(); // 增强轮播图效果
|
|
enhanceModals(); // 增强模态框效果
|
|
initSocialShare(); // 社交分享功能
|
|
enhanceStatsDisplay(); // 增强统计数据展示
|
|
initScrollProgress(); // 页面滚动进度指示器
|
|
|
|
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
|
});
|
|
|
|
// 导航功能初始化
|
|
function initNavigation() {
|
|
const navbar = document.querySelector('.navbar');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const navbarToggler = document.querySelector('.navbar-toggler');
|
|
const navbarCollapse = document.querySelector('.navbar-collapse');
|
|
|
|
// 滚动时导航栏样式变化
|
|
window.addEventListener('scroll', throttle(function() {
|
|
if (window.scrollY > 100) {
|
|
navbar.classList.add('navbar-scrolled', 'scrolled');
|
|
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
|
|
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.3)';
|
|
navbar.style.backdropFilter = 'blur(10px)';
|
|
} else {
|
|
navbar.classList.remove('navbar-scrolled', 'scrolled');
|
|
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
|
|
navbar.style.boxShadow = 'none';
|
|
}
|
|
}, 100));
|
|
|
|
// 移动端导航切换
|
|
if (navbarToggler && navbarCollapse) {
|
|
navbarToggler.addEventListener('click', function() {
|
|
navbarCollapse.classList.toggle('show');
|
|
this.classList.toggle('collapsed');
|
|
|
|
// 动画效果
|
|
if (navbarCollapse.classList.contains('show')) {
|
|
navbarCollapse.style.animation = 'slideDown 0.3s ease-out';
|
|
} else {
|
|
navbarCollapse.style.animation = 'slideUp 0.3s ease-out';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 导航链接点击效果
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
// 添加点击动画
|
|
this.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 150);
|
|
|
|
// 移除所有active类
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
// 添加当前active类
|
|
this.classList.add('active');
|
|
|
|
// 平滑滚动到目标区域
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId && targetId.startsWith('#')) {
|
|
e.preventDefault();
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
const offsetTop = targetElement.offsetTop - 80;
|
|
window.scrollTo({
|
|
top: offsetTop,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
// 关闭移动端菜单
|
|
if (navbarCollapse.classList.contains('show')) {
|
|
navbarToggler.click();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 悬停效果
|
|
link.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
|
|
link.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
|
|
// 自动高亮当前页面对应的导航项
|
|
const currentPage = window.location.pathname.split('/').pop();
|
|
navLinks.forEach(link => {
|
|
if (link.getAttribute('href') === currentPage) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 滚动效果初始化
|
|
function initScrollEffects() {
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('fade-in-up');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// 观察所有需要动画的元素
|
|
const animateElements = document.querySelectorAll('.card, .feature-icon, h2, h3, p.lead');
|
|
animateElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
|
|
// 动画效果初始化
|
|
function initAnimations() {
|
|
// 数字统计动画
|
|
const stats = document.querySelectorAll('.stat-number');
|
|
if (stats.length > 0) {
|
|
stats.forEach(stat => {
|
|
const target = parseInt(stat.textContent);
|
|
let current = 0;
|
|
const duration = 2000; // 2秒
|
|
const increment = target / (duration / 16); // 60fps
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
stat.textContent = target.toLocaleString();
|
|
clearInterval(timer);
|
|
} else {
|
|
stat.textContent = Math.floor(current).toLocaleString();
|
|
}
|
|
}, 16);
|
|
});
|
|
}
|
|
|
|
// 鼠标悬停效果
|
|
const cards = document.querySelectorAll('.card');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-8px)';
|
|
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 联系表单初始化
|
|
function initContactForm() {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 表单验证
|
|
if (!validateForm(contactForm)) {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(this);
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
// 显示加载状态
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="loading-spinner" role="status" aria-hidden="true"></span> 提交中...';
|
|
|
|
// 模拟表单提交
|
|
setTimeout(() => {
|
|
// 这里可以替换为实际的API调用
|
|
showAlert('success', '提交成功！我们会尽快联系您。');
|
|
contactForm.reset();
|
|
|
|
// 恢复按钮状态
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}, 2000);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 表单验证
|
|
function validateForm(form) {
|
|
let isValid = true;
|
|
const requiredFields = form.querySelectorAll('[required]');
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add('is-invalid');
|
|
|
|
// 创建错误提示
|
|
if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'invalid-feedback';
|
|
errorDiv.textContent = '此字段为必填项';
|
|
field.parentNode.insertBefore(errorDiv, field.nextSibling);
|
|
}
|
|
} else {
|
|
field.classList.remove('is-invalid');
|
|
|
|
// 移除错误提示
|
|
if (field.nextElementSibling && field.nextElementSibling.classList.contains('invalid-feedback')) {
|
|
field.nextElementSibling.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
return isValid;
|
|
}
|
|
|
|
// 显示提示信息
|
|
function showAlert(type, message) {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
// 添加到页面顶部
|
|
document.body.insertBefore(alertDiv, document.body.firstChild);
|
|
|
|
// 5秒后自动消失
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// 返回顶部功能
|
|
function initBackToTop() {
|
|
const backToTopBtn = document.createElement('button');
|
|
backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
|
|
backToTopBtn.className = 'btn btn-primary back-to-top';
|
|
|
|
document.body.appendChild(backToTopBtn);
|
|
|
|
backToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 300) {
|
|
backToTopBtn.style.display = 'block';
|
|
} else {
|
|
backToTopBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 图片懒加载
|
|
function initImageLazyLoading() {
|
|
const images = document.querySelectorAll('img[data-src]');
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
const imageObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.src = img.dataset.src;
|
|
img.classList.remove('lazy');
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
images.forEach(img => imageObserver.observe(img));
|
|
} else {
|
|
// 降级处理
|
|
images.forEach(img => {
|
|
img.src = img.dataset.src;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 表单验证初始化
|
|
function initFormValidation() {
|
|
const forms = document.querySelectorAll('.needs-validation');
|
|
|
|
Array.from(forms).forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
if (!form.checkValidity()) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
}
|
|
|
|
// 工具函数：防抖
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// 工具函数：节流
|
|
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 monitorPerformance() {
|
|
window.addEventListener('load', function() {
|
|
// 页面加载完成时间
|
|
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
|
console.log(`页面加载完成时间: ${loadTime}ms`);
|
|
|
|
// 核心网页指标
|
|
if ('loading' in HTMLImageElement.prototype) {
|
|
console.log('浏览器支持原生懒加载');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始化性能监控
|
|
monitorPerformance();
|
|
|
|
// 加载动画初始化
|
|
function initPreloader() {
|
|
const preloader = document.createElement('div');
|
|
preloader.className = 'preloader';
|
|
preloader.innerHTML = `
|
|
<div class="preloader-inner">
|
|
<div class="preloader-logo">
|
|
<i class="fas fa-cow text-primary fs-1"></i>
|
|
<div class="brand-name mt-2">NiuMall</div>
|
|
</div>
|
|
<div class="loading-bar">
|
|
<div class="loading-progress"></div>
|
|
</div>
|
|
<p class="loading-text">正在加载中...</p>
|
|
</div>
|
|
`;
|
|
|
|
// 添加加载动画样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
transition: opacity 0.5s ease, visibility 0.5s ease;
|
|
}
|
|
.preloader-inner {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
.brand-name {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.loading-bar {
|
|
width: 200px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
.loading-progress {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4CAF50, #81C784);
|
|
width: 0;
|
|
animation: loadingProgress 2s ease-in-out;
|
|
}
|
|
.loading-text {
|
|
margin-top: 1rem;
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
@keyframes loadingProgress {
|
|
0% { width: 0%; }
|
|
100% { width: 100%; }
|
|
}
|
|
.preloader.hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
document.body.appendChild(preloader);
|
|
|
|
// 页面加载完成后隐藏加载动画
|
|
window.addEventListener('load', function() {
|
|
setTimeout(() => {
|
|
preloader.classList.add('hide');
|
|
setTimeout(() => {
|
|
preloader.remove();
|
|
style.remove();
|
|
}, 500);
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// 打字机效果
|
|
function initTypewriter() {
|
|
const typewriterElements = document.querySelectorAll('.typewriter');
|
|
|
|
typewriterElements.forEach(element => {
|
|
const text = element.textContent;
|
|
element.textContent = '';
|
|
element.style.borderRight = '2px solid #4CAF50';
|
|
element.style.animation = 'typewriter-cursor 1s infinite';
|
|
|
|
let i = 0;
|
|
const timer = setInterval(() => {
|
|
if (i < text.length) {
|
|
element.textContent += text.charAt(i);
|
|
i++;
|
|
} else {
|
|
clearInterval(timer);
|
|
setTimeout(() => {
|
|
element.style.borderRight = 'none';
|
|
}, 1000);
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// 添加打字机样式
|
|
if (!document.querySelector('#typewriter-style')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'typewriter-style';
|
|
style.textContent = `
|
|
@keyframes typewriter-cursor {
|
|
0%, 50% { border-right-color: transparent; }
|
|
51%, 100% { border-right-color: #4CAF50; }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
}
|
|
|
|
// 进度条动画
|
|
function initProgressBars() {
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
|
|
const progressObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const progressBar = entry.target;
|
|
const targetWidth = progressBar.getAttribute('data-width') || '100%';
|
|
|
|
progressBar.style.width = '0%';
|
|
progressBar.style.transition = 'width 2s ease-in-out';
|
|
|
|
setTimeout(() => {
|
|
progressBar.style.width = targetWidth;
|
|
}, 100);
|
|
|
|
progressObserver.unobserve(progressBar);
|
|
}
|
|
});
|
|
});
|
|
|
|
progressBars.forEach(bar => progressObserver.observe(bar));
|
|
}
|
|
|
|
// 数字递增动画优化
|
|
function initCountUp() {
|
|
const countElements = document.querySelectorAll('.count-up');
|
|
|
|
const countObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const element = entry.target;
|
|
const target = parseInt(element.getAttribute('data-target') || element.textContent);
|
|
const duration = parseInt(element.getAttribute('data-duration') || '2000');
|
|
const suffix = element.getAttribute('data-suffix') || '';
|
|
|
|
animateNumber(element, 0, target, duration, suffix);
|
|
countObserver.unobserve(element);
|
|
}
|
|
});
|
|
});
|
|
|
|
countElements.forEach(el => countObserver.observe(el));
|
|
}
|
|
|
|
// 数字动画函数
|
|
function animateNumber(element, start, end, duration, suffix) {
|
|
const startTime = performance.now();
|
|
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// 使用缓动函数
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
const current = Math.floor(start + (end - start) * easeProgress);
|
|
|
|
element.textContent = current.toLocaleString() + suffix;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
// 模态框效果
|
|
function initModalEffects() {
|
|
const modals = document.querySelectorAll('.modal');
|
|
|
|
modals.forEach(modal => {
|
|
modal.addEventListener('show.bs.modal', function() {
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
this.querySelector('.modal-dialog').style.transition = 'all 0.3s ease';
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(1)';
|
|
this.querySelector('.modal-dialog').style.opacity = '1';
|
|
}, 10);
|
|
});
|
|
|
|
modal.addEventListener('hide.bs.modal', function() {
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 平滑滚动优化
|
|
function initSmoothScrolling() {
|
|
// 禁用默认滚动行为
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
|
|
if (target) {
|
|
const offsetTop = target.getBoundingClientRect().top + window.pageYOffset - 80;
|
|
|
|
// 使用自定义平滑滚动
|
|
smoothScrollTo(offsetTop, 1000);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 自定义平滑滚动函数
|
|
function smoothScrollTo(target, duration) {
|
|
const start = window.pageYOffset;
|
|
const distance = target - start;
|
|
const startTime = performance.now();
|
|
|
|
function scroll(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// 使用缓动函数
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
|
|
window.scrollTo(0, start + distance * easeProgress);
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
|
|
// 粒子效果
|
|
function initParticleEffect() {
|
|
const heroSection = document.querySelector('.hero-section');
|
|
if (!heroSection) return;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.top = '0';
|
|
canvas.style.left = '0';
|
|
canvas.style.width = '100%';
|
|
canvas.style.height = '100%';
|
|
canvas.style.pointerEvents = 'none';
|
|
canvas.style.zIndex = '1';
|
|
|
|
heroSection.appendChild(canvas);
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = heroSection.offsetWidth;
|
|
canvas.height = heroSection.offsetHeight;
|
|
}
|
|
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
const particles = [];
|
|
|
|
// 创建粒子
|
|
function createParticle() {
|
|
return {
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 2 + 1,
|
|
opacity: Math.random() * 0.5 + 0.2
|
|
};
|
|
}
|
|
|
|
// 初始化粒子
|
|
for (let i = 0; i < 50; i++) {
|
|
particles.push(createParticle());
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
particles.forEach((particle, index) => {
|
|
// 更新位置
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
// 边界检测
|
|
if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
|
|
if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
|
|
|
|
// 绘制粒子
|
|
ctx.beginPath();
|
|
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(76, 175, 80, ${particle.opacity})`;
|
|
ctx.fill();
|
|
|
|
// 连接粒子
|
|
particles.forEach((otherParticle, otherIndex) => {
|
|
if (index !== otherIndex) {
|
|
const dx = particle.x - otherParticle.x;
|
|
const dy = particle.y - otherParticle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < 100) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particle.x, particle.y);
|
|
ctx.lineTo(otherParticle.x, otherParticle.y);
|
|
ctx.strokeStyle = `rgba(76, 175, 80, ${0.1 * (1 - distance / 100)})`;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
}
|
|
|
|
// 案例筛选功能
|
|
function initCaseFiltering() {
|
|
const filterButtons = document.querySelectorAll('[data-filter]');
|
|
const caseItems = document.querySelectorAll('.case-grid .col-md-6');
|
|
|
|
if (!filterButtons.length || !caseItems.length) return;
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const filterValue = this.getAttribute('data-filter');
|
|
|
|
// 更新激活状态
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// 筛选案例
|
|
caseItems.forEach(item => {
|
|
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
|
|
item.style.display = 'block';
|
|
setTimeout(() => {
|
|
item.classList.add('fade-in-up');
|
|
}, 100);
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// 新闻筛选功能
|
|
function initNewsFiltering() {
|
|
const filterButtons = document.querySelectorAll('[data-filter]');
|
|
const newsItems = document.querySelectorAll('#news-list .col-12');
|
|
const searchInput = document.getElementById('newsSearch');
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
|
|
if (!filterButtons.length || !newsItems.length) return;
|
|
|
|
// 筛选功能
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const filterValue = this.getAttribute('data-filter');
|
|
|
|
// 更新激活状态
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// 筛选新闻
|
|
newsItems.forEach(item => {
|
|
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
|
|
item.style.display = 'block';
|
|
setTimeout(() => {
|
|
item.classList.add('fade-in-up');
|
|
}, 100);
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 搜索功能
|
|
if (searchInput && searchBtn) {
|
|
const performSearch = function() {
|
|
const searchTerm = searchInput.value.toLowerCase().trim();
|
|
|
|
newsItems.forEach(item => {
|
|
const title = item.querySelector('.card-title').textContent.toLowerCase();
|
|
const content = item.querySelector('.card-text').textContent.toLowerCase();
|
|
|
|
if (searchTerm === '' || title.includes(searchTerm) || content.includes(searchTerm)) {
|
|
item.style.display = 'block';
|
|
setTimeout(() => {
|
|
item.classList.add('fade-in-up');
|
|
}, 100);
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
};
|
|
|
|
searchBtn.addEventListener('click', performSearch);
|
|
searchInput.addEventListener('keyup', function(e) {
|
|
if (e.key === 'Enter') {
|
|
performSearch();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 页面过渡动画
|
|
function initPageTransitions() {
|
|
// 为所有内部链接添加页面切换效果
|
|
const links = document.querySelectorAll('a[href^="/"]:not([target])');
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
const href = this.getAttribute('href');
|
|
|
|
// 如果是锚点链接或外部链接，不使用过渡效果
|
|
if (href.startsWith('#') || href.includes('://')) return;
|
|
|
|
e.preventDefault();
|
|
|
|
// 添加过渡类
|
|
document.body.classList.add('page-transition');
|
|
|
|
// 延迟跳转以显示过渡效果
|
|
setTimeout(() => {
|
|
window.location.href = href;
|
|
}, 300);
|
|
});
|
|
});
|
|
|
|
// 页面加载完成后移除过渡类
|
|
window.addEventListener('pageshow', function() {
|
|
document.body.classList.remove('page-transition');
|
|
});
|
|
}
|
|
|
|
// 增强卡片悬停效果
|
|
function enhanceCardHoverEffects() {
|
|
const cards = document.querySelectorAll('.card');
|
|
|
|
cards.forEach(card => {
|
|
// 添加3D变换效果
|
|
card.addEventListener('mousemove', function(e) {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
const rotateY = (x - centerX) / 10;
|
|
const rotateX = (centerY - y) / 10;
|
|
|
|
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 增强按钮点击效果
|
|
function enhanceButtonEffects() {
|
|
const buttons = document.querySelectorAll('.btn');
|
|
|
|
buttons.forEach(button => {
|
|
button.addEventListener('mousedown', function() {
|
|
this.classList.add('btn-pressed');
|
|
});
|
|
|
|
button.addEventListener('mouseup', function() {
|
|
this.classList.remove('btn-pressed');
|
|
});
|
|
|
|
button.addEventListener('mouseleave', function() {
|
|
this.classList.remove('btn-pressed');
|
|
});
|
|
});
|
|
}
|
|
|
|
// 图片放大效果
|
|
function initImageZoom() {
|
|
const images = document.querySelectorAll('.card-img-top');
|
|
|
|
images.forEach(img => {
|
|
img.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.05)';
|
|
});
|
|
|
|
img.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 增强返回顶部按钮效果
|
|
function enhanceBackToTop() {
|
|
const backToTopBtn = document.querySelector('.back-to-top');
|
|
|
|
if (backToTopBtn) {
|
|
// 添加脉冲动画
|
|
setInterval(() => {
|
|
backToTopBtn.classList.toggle('pulse');
|
|
}, 2000);
|
|
|
|
// 滚动进度指示
|
|
window.addEventListener('scroll', function() {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.body.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
|
|
// 可以在这里添加进度指示器
|
|
});
|
|
}
|
|
}
|
|
|
|
// 增强表单交互效果
|
|
function enhanceFormInteractions() {
|
|
const formControls = document.querySelectorAll('.form-control, .form-select');
|
|
|
|
formControls.forEach(control => {
|
|
control.addEventListener('focus', function() {
|
|
this.parentElement.classList.add('focused');
|
|
});
|
|
|
|
control.addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('focused');
|
|
});
|
|
|
|
// 添加输入效果
|
|
control.addEventListener('input', function() {
|
|
if (this.value.length > 0) {
|
|
this.classList.add('has-value');
|
|
} else {
|
|
this.classList.remove('has-value');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 增强导航栏效果
|
|
function enhanceNavbar() {
|
|
const navbar = document.querySelector('.navbar');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
// 添加导航栏品牌动画
|
|
const brand = document.querySelector('.navbar-brand');
|
|
if (brand) {
|
|
brand.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.05)';
|
|
});
|
|
|
|
brand.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
}
|
|
|
|
// 增强导航链接效果
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
|
|
link.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 增强轮播图效果
|
|
function enhanceCarousel() {
|
|
const carousels = document.querySelectorAll('.carousel');
|
|
|
|
carousels.forEach(carousel => {
|
|
const carouselElement = new bootstrap.Carousel(carousel, {
|
|
interval: 5000,
|
|
pause: 'hover',
|
|
wrap: true
|
|
});
|
|
|
|
// 添加手动控制增强
|
|
const indicators = carousel.querySelectorAll('.carousel-indicators button');
|
|
const controls = carousel.querySelectorAll('.carousel-control-prev, .carousel-control-next');
|
|
|
|
// 指示器悬停效果
|
|
indicators.forEach((indicator, index) => {
|
|
indicator.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.2)';
|
|
});
|
|
|
|
indicator.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
|
|
// 控制按钮效果
|
|
controls.forEach(control => {
|
|
control.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.1)';
|
|
});
|
|
|
|
control.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// 增强模态框效果
|
|
function enhanceModals() {
|
|
const modals = document.querySelectorAll('.modal');
|
|
|
|
modals.forEach(modal => {
|
|
modal.addEventListener('show.bs.modal', function() {
|
|
// 添加背景模糊效果
|
|
document.body.classList.add('modal-open-blur');
|
|
|
|
// 增强模态框动画
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
this.querySelector('.modal-dialog').style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(1) translateY(0)';
|
|
this.querySelector('.modal-dialog').style.opacity = '1';
|
|
}, 50);
|
|
});
|
|
|
|
modal.addEventListener('hide.bs.modal', function() {
|
|
// 移除背景模糊效果
|
|
document.body.classList.remove('modal-open-blur');
|
|
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 添加社交分享功能
|
|
function initSocialShare() {
|
|
const shareButtons = document.querySelectorAll('.social-share');
|
|
|
|
if (shareButtons.length > 0) {
|
|
shareButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const url = window.location.href;
|
|
const title = document.title;
|
|
|
|
if (navigator.share) {
|
|
// 使用原生分享API
|
|
navigator.share({
|
|
title: title,
|
|
url: url
|
|
}).catch(console.error);
|
|
} else {
|
|
// 降级处理：复制链接
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = url;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
|
|
// 显示提示
|
|
showAlert('info', '链接已复制到剪贴板');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// 增强统计数据展示
|
|
function enhanceStatsDisplay() {
|
|
const statItems = document.querySelectorAll('.stat-item, .stat-number');
|
|
|
|
statItems.forEach(item => {
|
|
item.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.05)';
|
|
});
|
|
|
|
item.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 添加页面滚动进度指示器
|
|
function initScrollProgress() {
|
|
// 创建进度条元素
|
|
const progressBar = document.createElement('div');
|
|
progressBar.className = 'scroll-progress';
|
|
progressBar.innerHTML = '<div class="scroll-progress-bar"></div>';
|
|
document.body.appendChild(progressBar);
|
|
|
|
// 添加样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.scroll-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.scroll-progress-bar {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
|
width: 0%;
|
|
transition: width 0.1s ease;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// 监听滚动事件
|
|
window.addEventListener('scroll', function() {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.body.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
|
|
progressBar.querySelector('.scroll-progress-bar').style.width = scrollPercent + '%';
|
|
});
|
|
}
|